knockoutjs - javascript 数组到 observableArray 到模板 - 如何？答案

【问题标题】：knockoutjs - javascript array to observableArray to template - how to?knockoutjs - javascript 数组到 observableArray 到模板 - 如何？
【发布时间】：2013-05-19 05:51:39
【问题描述】：

我有一个页面，其中包含订阅者、他们的配偶和 N 个受抚养人的信息。

对于每个人，我们都在询问他们的姓名、出生日期、地址等。基本上，它们是一遍又一遍的相同字段。我可以为订阅者和配偶创建一个模型。我将永远有一个订阅者，我不担心在我的模型中创建一个空的配偶节点，但对于孩子们，我不确定如何继续......

我的页面是一个非常长的页面，其中有很多部分将被隐藏，直到需要处理该部分 - 就像一个向导一样。

我当前页面中的每个部分都以外部 div 开头：

<div data-bind="with: submodelName">  // i.e. subscriberInfo, spouseInfo

我只是不知道如何处理 N 个孩子。

我可以将整个

部分填充到

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

Scott，我不确定我是否完全理解，但这可能会有所帮助：

只有一种形式

一种方法是显示一个“添加依赖项”按钮，一个供用户选择的依赖项名称列表，然后只显示一个表单来编辑（或添加）选定的依赖项。请原谅我的伪代码，但是是这样的：

myModel = {
    myDependents = ko.observableArray(dependents);
    mySelectedDependentIndex = ko.observable(0);
    myActiveDependent = ko.computed(function(){ return myDependents()[mySelectedDependentIndex()];});
}

然后将您的表单绑定到模型的 myActiveDependent 计算的 observable。

每个受抚养人一份表格

另一种方法是使用foreach 绑定。

myModel = {
    myDependents = ko.observableArray(dependents);        
}

myDependentModel = {
    name = ko.observable('someName');
}

<div id="dependentFormListContainer">
    <ul data-bind="foreach: myDependents">
        <li class="dependentForm">
            <input type="text" data-bind="value: name" />
        </li>
    </ul>
</div>

ko.applyBindings(myModel, $('#dependentFormListContainer')[0]);

同样，这都是伪代码，但希望这会为您指明解决方案的方向。

【讨论】：

【解决方案2】：

如果我理解正确，您可以像这样使用 if 绑定：

<!-- ko 'if': valueIsWhatIAmLookingFor -->
<div data-bind='template: myTemplate'>
</div>
<!-- /ko -->

我为 IE 转义了“if”。

【讨论】：