Question

我是一名Knockout.js新手，我正试图创造一个简单的＆＃34;形式。

我正在使用ajax加载html视图并且我正在应用绑定。

用户可以从select中选择一些插件（从服务器中抛出DOM，它不作为JSON加载），选择有效插件后，应该创建另一个具有相同选项的选择，除了选择的一个以前等选择中有多少个插件。

到目前为止我有什么

<table class="new_account new_account_details">
    <tr data-bind="foreach: new Array(plan_addons_num())">
        <td>
            <select class="plans_plan_addon">
                <option value="">Select</option>
                <option value="1">Addon1</option>
                <option value="2">Addon2</option>
            </select>
        </td>
    </tr>
</table>

var viewModels = {
    planPlans: function () {
        this.plan_addons_num = ko.observable(1);
        this.plan_addon = ko.observable();
        this.plan_addons = ko.observableArray();

//        ko.computed(function () {
//            if (Number(this.plan_addon()) > 0) {
//                this.plan_addons_num(this.plan_addons_num() + 1);
//            }
//        }, this);
    }
};

plan_addon我希望它是当前选择的插件，但如果我将它作为值绑定在foreach中，它就不起作用。

我可以在HTML的某处将可用插件设置为jSON代码，以便视图模型在jquery的帮助下使用它。我怎么能这样做？

Answer 1

在使用淘汰赛的时候，我觉得先考虑一下模型是有帮助的。计划模型中的所有内容，并稍后担心标记，因为标记应仅仅是模型状态的反映。

我不确定你对现有绑定的要求，但是我将如何创建你的选择控件。在先前选定的选项数组上创建foreach绑定，然后添加一个包含其余选项的其他选择。

<table class="new_account new_account_details">
  <tr>
    <!--ko foreach: plan_selectedAddons-->
    <td>
      <select class="plans_plan_addon" data-bind="options: $parent.plan_addons, value: $data" disabled></select>
    </td>
    <!--/ko-->
    <td>
      <select class="plans_plan_addon" data-bind="options: plan_remainingOptions, optionsCaption: 'Select', event: { change: selectAddon }"></select>
    </td>
  </tr>
</table>

以下是演示javascript的完整小提琴： Fiddle

至于最初填充options数组是的，我会在JSON中包含它，而不是试图从DOM上的现有select中删除它，但是你总是可以用jQuery来做，然后隐藏原始的select。

选择一个选项后，Knockout.js会生成另一个选项，但选择的选项除外

1 个答案: