綁定模板項目中KnockoutJS陣列的

我需要根據它們出現在列表中的一個jQuery插件，像這樣的位置來命名一個KnockoutJS模板<div>'s指數：綁定模板項目中KnockoutJS陣列的

<div id="item1">...</div> 
<div id="item2">...</div> 
<div id="item3">...</div>

有一種使用KnockoutJS綁定到數組中項目索引的方法？如果我不得不使用ROWINDEX將這些數據添加到數據庫中的select，那將是一件很遺憾的事情。

來源

2011-05-18 jaffa

更新：KO現在支持您可以在foreach（或template與foreach PARAM）內使用$index上下文變量。文檔：http://knockoutjs.com/documentation/binding-context.html

如果你是沒事用jQuery的模板{{each}}，那麼像這樣將工作：

<div data-bind="template: 'allItemsTmpl'"></div> 
<script id="allItemsTmpl" type="text/html"> 
    {{each(i, item) items}} 
    <div data-bind="attr: { id: 'item' + i }"> 
     <input data-bind="value: name" /> 
    </div> 
    {{/each}} 
</script>

如果你必須使用foreach選項，那麼像這樣的工作：

<div data-bind="template: { name: 'itemTmpl', foreach: items }"></div> 
<button data-bind="click: addItem">Add Item</button> 
<script id="itemTmpl" type="text/html"> 
    <div data-bind="attr: { id: 'item' + ko.utils.arrayIndexOf(viewModel.items, $data) }"> 
     <input data-bind="value: name" /> 
    </div> 
</script>

編輯：這幾天我更喜歡創建一個訂閱我的observableArray，只需要通過數組一個通過並創建/設置項目上的索引可觀察。像：

//attach index to items whenever array changes 
viewModel.tasks.subscribe(function() { 
    var tasks = this.tasks(); 
    for (var i = 0, j = tasks.length; i < j; i++) { 
     var task = tasks[i]; 
     if (!task.index) { 
      task.index = ko.observable(i); 
     } else { 
      task.index(i); 
     } 
    } 
}, viewModel);

樣品在這裏：http://jsfiddle.net/rniemeyer/CXBFN/

，或者你可以把這個想法和擴展observableArrays提供一個indexed功能，它會讓你只要通過喚起myObservableArray.indexed()進行此設置。

這裏有一個例子：http://jsfiddle.net/rniemeyer/nEgqY/

來源

2011-05-18 16:36:46

第二種方法的另一種選擇是向您的模型添加一個「Index」屬性，該屬性返回與ko.utils.arrayIndexOf相同的值（.. etc - 我發現它在很多場合都解決了我的問題： - ） – Adam 2011-06-15 07:22:06

索引（）方法的最後一個提琴很容易成爲答案的最佳部分，因爲它很容易重用。 – alvin 2012-03-04 05:11:19

這真棒！乾杯! – Mantisimo 2012-03-22 12:06:39

有同樣的問題，但有dependantObservable源對foreach模板，唉了ko.utils.arrayIndexOf沒有工作......

解決方案：創建重建由dependantObservable返回的數組的函數，並且簡單地使用JS的indexOf功能與檔案：

arrayIndexDO: function (item) { 
    var filteredArray = ko.utils.arrayFilter(viewModel.someObservableArray(), function (element) { 
     return element.id() == view.selectedId(); 
    }); 
    var index = filteredArray.indexOf(item); 
    return index; 
}

的Et VO ilà，jQuery tpl中的預期索引。

來源

2012-01-05 15:51:31 Mat

這是淘汰賽2.1.0及以上的要容易得多：

<div data-bind="foreach: items"> 
    <div data-bind="attr: { id : 'item' + $index() }"></div> 
</div>

沒有華麗的腳本必要的。

請注意：attr: { id : 'item' + $index }將不起作用。由於$index本身就是一個函數，因此如果不添加圓括號，會導致您的id成爲'item'和整個函數定義的串聯。

來源

2012-11-30 15:33:25 jkschneider

綁定模板項目中KnockoutJS陣列的

回答

相關問題