KnockoutJS：从JavaScript模板中访问数组中项目的索引 [英] KnockoutJS: Access index of item in array from within the JavaScript template

问题描述

我使用KnockoutJS从数组填充列表：

 < div data-bind：foreach：list> ; 
< input type =textdata-bind =value：myText/> 
< / div> 
 
函数ViewModel（）{
 self.list = ko.observableArray（[
 new listItem（sample text）
]）; 
}; 
 
函数listItem（text）{
 this.myText = text; 
}; 
  

我可以为我的输入的各个实例分配一个ID，如此

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

如何从listItem函数中访问此索引？我希望能够执行类似

<$的操作p $ p> function listItem（text）{
this.myText = text;
this.index = $ index;
};


以便进一步处理。

解决方案

您可以创建一个自定义绑定，将您的属性设置为索引，它看起来像：

  ko.bindingHandlers.setIndex = {
 init：function（element，valueAccessor，allBindings，data，context）{
 var prop = valueAccessor（）; 
 data [prop] = context。$ index ; 
} 
}; 
  

这假设您正在处理对象你的ar您会像以下一样使用它：

 < ul data-bind =foreach：items> 
< li data-bind =setIndex：'myIndex'，text：name>< / li> 
< / ul> 
  

因此，这会复制 $ index observable使用您指定的属性名称转到您的对象。示例： http://jsfiddle.net/rniemeyer/zGmcg/

你可以在绑定之外执行此操作的另一种方法（这是我在 $ index 之前执行此操作的方式）是订阅observableArray的更改并重新填充索引每次。

以下是observableArray的扩展名：

  //跟踪observableArray中项目的索引
 ko.observableArray.fn.indexed = function（prop）{
 prop = prop || '指数'; 
 //每当数组发生变化时，做一个循环来更新每个
上的索引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）; 
} 
} 
} ）; 
 
 //初始化索引
 this.valueHasMutated（）; 
返回此; 
}; 
  

然后您可以使用它：

  this.myItems = ko.observableArray（）。indexed（'myIndexProp'）; 
  

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

I populate a list from an array using 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;
};

I can assign an id to the individual instances of my input like so

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

How do I access this index from within my listItem function? I want to be able to do something like

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

in order to use this for further processing.

解决方案

You could create a custom binding that sets your property to the index, it would look something like:

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

This assumes that you are dealing with objects in your array. You would use it like:

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

So, this copies the $index observable on to your object with the property name that you specify. Sample: http://jsfiddle.net/rniemeyer/zGmcg/

Another way that you can do this outside of bindings (this is how I used to do it before $index) is to subscribe to changes to the observableArray and repopulate an index each time.

Here is what an extension to an observableArray might look like:

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

You would then use it like:

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

Here is a sample: http://jsfiddle.net/rniemeyer/bQD2C/

这篇关于KnockoutJS：从JavaScript模板中访问数组中项目的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！