带有模板和 foreach 的 KnockoutJS observableArray

Posted 2023-03-27

【中文标题】带有模板和 foreach 的 KnockoutJS observableArray

【英文标题】：KnockoutJS observableArray with template and foreach

【发布时间】：2014-04-26 01:51:27

【问题描述】：

我正在尝试使用 foreach 和复选框将 Knockout observableArray 绑定到我的 UI，然后根据检查的内容创建一个数组。

我收到此错误： 未捕获的引用错误：无法处理绑定“模板：函数（）......”

这是我的 html：

<dl data-bind="template:  name: 'QuarterTemplate', foreach: Quarter, templateOptions:  selections: SelectedQuarters  "></dl>

<script id="QuarterTemplate" type="text/html">
<dd>
    <label>
        <input type="checkbox" data-bind="attr:  value: quarter , checked: $item.selections" />
        <a data-bind="text: quarter" ></a>
    </label>
</dd>
</script>

这是我的 Knockout ViewModel：

function ViewModel() 

this.Quarter = ko.observableArray([
     quarter: "Q1" ,
     quarter: "Q2" ,
     quarter: "Q3" ,
     quarter: "Q4" 
]);

this.SelectedQuarters = ko.observableArray();

this.SelectedQuarters.subscribe(function () 
    console.log(this.SelectedQuarters());
);



$(document).ready(function () 

    ko.applyBindings(new ViewModel());

);

我还设置了一个小提琴：

http://jsfiddle.net/SpRLP/1/

最终我想在控制台中看到的是这样的：

第一季度

第一季度，第三季度

Q1、Q3、Q2

Q1,Q3,Q2,Q4

Q1、Q2、Q4

【参考方案1】：

templateOptions 仅在使用jQuery Templates plugin 时可用。在使用 KO 原生模板时，最常见的是使用$root 或$parent 以这种方式绑定。这是关于这些context variables 的一些文档。

所以，它看起来像：

<dl data-bind="template:  name: 'QuarterTemplate', foreach: Quarter "></dl>

<script id="QuarterTemplate" type="text/html">
    <dd>
        <label>
            <input type="checkbox" data-bind="attr:  value: quarter , checked: $parent.SelectedQuarters" />
            <a data-bind="text: quarter" ></a>
            </label>
</dd>
</script>

这是一个更新的小提琴：http://jsfiddle.net/rniemeyer/tY5TF/

【参考方案2】：

谢谢。这帮助我让我的 ObservableArray 复选框正常工作。我根据您的示例调整了我的代码，并在您可以显示的 JS“类”中提供了更多信息。

// Define a "Quarter" class
function Quarter(id, name) 
    return 
        id : ko.observable(id),
        name : ko.observable(name)
    ;


var viewModel = 
    quarters : ko.observableArray([
    new Quarter("Q1", "First Quarter"),
    new Quarter("Q2", "Second Quarter"),
    new Quarter("Q3", "Third Quarter"),
    new Quarter("Q4", "Fourth Quarter"),
    ]),
    
    selectedQuarters : ko.observableArray(["Q1", "Q3"])
;

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<ul data-bind="template:  name: 'QuarterTemplate', foreach: quarters "></ul>

<script id="QuarterTemplate" type="text/html">
    <li>
        <input type="checkbox" data-bind="checkedValue: id, checked: $parent.selectedQuarters" />
        <span data-bind="text: name"></span>
    </li>
</script>

<pre data-bind="text: ko.toJSON(selectedQuarters, null, 2)"></pre>