如何在 Knockout.js 向导中获取单选按钮选项的值？

Question

为了简单起见，这里是fiddle：http://jsfiddle.net/FyuSD/157/

<script id="choiceTmpl" type="text/html">
            <label><input type="radio" value="boughtBefore" data-bind="checked: radioSelectedOptionValue" />Purchase products I have bought before</label>
            <br />
            <label><input type="radio" value="searchProduct" data-bind="checked: radioSelectedOptionValue" />Search for a product I haven't purchased before</label>
            <br />

我想我有几个问题。我正在构建一个向导，需要不同的执行步骤，具体取决于用户 select 的选项。我想知道的问题是，如何获取他们 select?

的单选按钮的值

与第二步一样，如果他们 select "purchase products I have bought before" 我如何将其重定向到另一个问题：根据指南创建订单或根据之前的订单创建订单（再次使用单选按钮）？

我不知道如何获取它们的值 select。 此外，我如何根据他们选择的选项跳过步骤？（例如，如果他们在步骤 2 中 select "want to search for a product"，则从步骤 2 转到步骤 4）

最后，有没有一种简单的方法可以更改单选按钮文本以匹配问题，而无需为每个问题创建新模板？

抱歉，如果问题太多，感谢您的帮助...

Answer 1

他们检查的单选按钮的值通过检查绑定传递给函数（通常是一个可观察的，设置它的值）。参见radio example in the documentation。
将计算设置为状态机，然后让它的值确定哪个向导页面可见。
标签文本也可以绑定到模型属性，但我在示例中没有这样做。

我写了一个简单的例子Fiddle：http://jsfiddle.net/rqt46qw1/ 请注意，虽然我的示例仅使用单选按钮选择来确定要显示的页面，但您的计算可以根据需要包含尽可能多的变量。

<div data-bind="visible:wizPage() == '1'">
    <h1>Welcome</h1>
    <label>Page 2</label><input type="radio" value="p2" data-bind="checked:radioSelected" />
    <label>Page 3</label><input type="radio" value="p3" data-bind="checked:radioSelected" />
</div>
<div data-bind="visible:wizPage() == '2'">
    <h1>Some Option</h1>
    <label>Page 3</label><input type="radio" value="p3" data-bind="checked:radioSelected" />
    <label>Start Over</label><input type="radio" value="p1" data-bind="checked:radioSelected" />
</div>
<div data-bind="visible:wizPage() == '3'">
    <h1>Another Option</h1>
    <label>Page 2</label><input type="radio" value="p2" data-bind="checked:radioSelected" />
    <label>Start Over</label><input type="radio" value="p1" data-bind="checked:radioSelected" />
</div>

Javascript:

var viewModel = (function () {
    var radioSelected = ko.observable();
    var wizPage = ko.computed(function () {
        if (radioSelected() == 'p2') {
            return '2';
        }
        else if (radioSelected() == 'p3') {
            return '3';
        }
        else {
            return '1';
        }
    });
    return {
        wizPage: wizPage,
        radioSelected:radioSelected
    };
}());

console.debug("ViewModel:", viewModel);
ko.applyBindings(viewModel);

如何在 Knockout.js 向导中获取单选按钮选项的值？

How do I get the value of radio button option in my Knockout.js wizard?

javascript

wizard

radio-button

knockout.js

knockout-templating