KnockoutJS observableArray與模板和foreach

Question

我想要使用foreach和複選框將Knockout observableArray綁定到我的UI，然後根據所檢查的內容創建一個數組。

我收到此錯誤： 未捕獲的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

Q1，Q3

Q1，Q3，Q2

Q1，Q3，Q2，Q4

Q1，Q2，Q4

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

Answer 2

感謝。這幫助我讓我的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>