KnockoutJS observableArray与模板和foreach

我想要使用foreach和复选框将Knockout observableArray绑定到我的UI，然后根据所检查的内容创建一个数组。KnockoutJS observableArray与模板和foreach

我收到此错误：未捕获的ReferenceError：无法处理绑定“template：function（）。。。”

这里是我的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>

这里是我的淘汰赛视图模型：

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

Q1，Q3，Q2

Q1，Q3，Q2，Q4

Q1，Q2，Q4

来源

2014-03-19 user3062114

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/

来源

2014-03-19 16:50:47

感谢。这帮助我让我的ObservableArray复选框起作用。我将自己的代码改编为您的示例，并在您可以显示的JS'class'中获得更多信息。

// 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>

来源

2016-06-08 14:05:29 Rubenisme

KnockoutJS observableArray与模板和foreach

回答

相关问题