Knockout.js - 动态应用模板答案

【问题标题】：Knockout.js - Dynamic apply templateKnockout.js - 动态应用模板
【发布时间】：2013-05-22 16:23:06
【问题描述】：

我有一个包含是/否下拉菜单的表单。如果选择“是”，我想使用模板生成 n 个新的 html 同级容器。如果他们永远不会选择“是”，我不想用空表单弄乱 html。

我想知道如何做到这一点。

也许我可以将包含属性创建为 observableArray()。然后，什么？，选择框上的自定义绑定，它运行一个检查选择框值的函数，如果“是”，则获取内容数组和 $.each() observableArray.push()？

是否有非自定义绑定方式来执行此操作？

谢谢。

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

当然，您可以通过手动为您的淘汰赛 observable 订阅一个函数来做到这一点。您的视图模型可能如下所示：

var myModel = function(){
    var self = this;
    self.buildItems = ko.observable(false);//for the yes/no
    self.items = ko.observableArray();

    //ask knockout to run this function when the buildItems observable value changes
    self.subscription = this.buildItems.subscribe(function(newValue){
        if(newValue == 'true'){
            //modify the items observableArray so that the UI is updated
            var newItems = [{name:'item1'},{name:'item2'}];
            self.items(newItems);
        }
    });
};

var model = new myModel();

然后你的模板可能看起来像这样：

<div id="bindContainer">
    <select data-bind="value: buildItems">
        <option value="false">No</option>
        <option value="true">Yes</option>
    </select>
    <ul data-bind="foreach: items">
        <li data-bind="text: name"></li>
    </ul>
</div>

这是这种方法的一个小技巧：http://jsfiddle.net/vmebt/

【讨论】：