KnockoutJS:在数组从JavaScript的模板中项目的访问索引(KnockoutJS: A

2019-06-27 16:51发布

我填充使用KnockoutJS数组列表:

<div data-bind:"foreach: list">
   <input type="text" data-bind="value: myText" />
</div>

function ViewModel() {
    self.list = ko.observableArray([
        new listItem("sample text")
    ]);
};

function listItem (text) {
    this.myText = text;
};

我可以分配一个id,我输入的,像这样的单个实例

<input data-bind="attr: { id: $index } ...

如何从我的listItem函数内访问该指数? 我希望能够像做

function listItem (text) {
    this.myText = text;
    this.index = $index;
};

为了使用这个用于进一步处理。

Answer 1:

您可以创建一个自定义绑定,你的属性设置为索引,它看起来是这样的:

ko.bindingHandlers.setIndex = {
    init: function(element, valueAccessor, allBindings, data, context) {
        var prop = valueAccessor();
        data[prop] = context.$index;
    }        
};

这是假设你正在处理您的数组中的对象。 你会使用它,如:

<ul data-bind="foreach: items">
    <li data-bind="setIndex: 'myIndex', text: name"></li>
</ul>

所以,这个副本的$index上与您指定的属性名称的对象观测。 示例: http://jsfiddle.net/rniemeyer/zGmcg/

你可以做到这一点的绑定之外(这是我如何使用前做的另一种方式$index )是订阅更改observableArray每次重新填充的索引。

这里是一个扩展的observableArray可能是什么样子:

//track an index on items in an observableArray
ko.observableArray.fn.indexed = function(prop) {
    prop = prop || 'index';
   //whenever the array changes, make one loop to update the index on each
   this.subscribe(function(newValue) {
       if (newValue) {
           var item;
           for (var i = 0, j = newValue.length; i < j; i++) {
               item = newValue[i];
               if (!ko.isObservable(item[prop])) {
                  item[prop] = ko.observable();
               }
               item[prop](i);      
           }
       }   
   }); 

   //initialize the index
   this.valueHasMutated(); 
   return this;
};

那么你可以使用它像:

this.myItems = ko.observableArray().indexed('myIndexProp');

下面是一个示例: http://jsfiddle.net/rniemeyer/bQD2C/



文章来源: KnockoutJS: Access index of item in array from within the JavaScript template