0

我有一个页面，其中包含订阅者、他们的配偶和 N 名家属的信息。

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

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

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

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

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

我可以将整个 <div><form></form><div> 部分填充到 <script> 标记中并使其成为模板，但是如何将不同的模型绑定到每个项目？即我如何模拟“with:”部分？

我当前的模型设置是我有一个大型包装模型，我在其中创建了许多子模型（每个子模型 4 + 一个）并调用单个 applyBindings()：

var masterPageModel = new PageViewModel(); // pulls in several other modules

    // ... pageViewModel.js contents::

    // *** section-specific models
    self.selectedCoverage = ko.observable();
    self.contactInformation = ko.observable();
    self.subscriberInformation = ko.observable();
    self.spouseInformation = ko.observable();
    self.dependentInformation = ko.observableArray(); // how will this work? array?

    $.getJSON("./load.php",{},function(modelPackage){

         // **** meta properties
         self.modelList(modelPackage.modelList);
         self.currentModel(modelPackage.currentModel);

         // models
         self.selectedCoverage(new SelectedCoverage(modelPackage.models["selectedCoverage"]));
         self.contactInformation(new ContactInformation(modelPackage.models["contactInformation"]));
         self.subscriberInformation(new SubscriberInformation(modelPackage.models["subscriberInformation"]));
         self.dependentInformation(new DependentInformation(modelPackage.models["dependentInformation"]));  // this isn't working
         // dependentInformation is an array of people and information....

    }); 

    //... back to first file:

ko.applyBindings(masterPageModel);

谢谢。任何帮助将不胜感激。

4

2 回答 2

0

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

只有一种形式

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

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]);

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

于 2013-05-18T21:51:39.310 回答
0

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

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

我为 IE 转义了“如果”。

于 2013-05-18T21:21:12.263 回答