0

为了简化事情，这里是小提琴：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 />

我想我有几个问题。我正在构建一个向导，并且需要不同的执行步骤，具体取决于用户选择的选项。我想知道的问题是，我如何获得他们选择的单选按钮的值？

就像第二步一样，如果他们选择“购买我以前购买过的产品”，我如何将其重定向到另一个问题：从指南创建订单或从以前的订单创建订单（再次使用单选按钮）？

我不知道如何获得他们选择的价值。此外，我将如何根据他们选择的选项跳过步骤？（例如，如果他们在第 2 步中选择“想要搜索产品”，则从第 2 步转到第 4 步）

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

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

4

1 回答 1

2
  1. 他们检查的单选按钮的值通过检查的绑定传递给函数（通常是可观察的，设置其值）。请参阅文档中的无线电示例。
  2. 将计算设置为状态机，然后让其值确定哪个向导页面可见。
  3. 标签文本也可以绑定到模型属性，但在我的示例中没有这样做。

我写了一个简单的 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);
于 2015-05-29T18:16:45.720 回答