Lier un élément de modèle à l'index du tableau dans KnockoutJS

J'ai besoin de nom de la <div>'s dans un KnockoutJS modèle en fonction de la position qu'ils apparaissent dans la liste pour un plugin Jquery comme suit:

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

Est-il un moyen de se lier à l'index de l'élément dans le tableau à l'aide de KnockoutJS?
Ce serait une honte si je devais ajouter ces données pour le sélectionner sur la base de données à l'aide de ROWINDEX.

source d'informationauteur jaffa | 2011-05-18

  1. 21

    mise à jour: KO prend désormais en charge un $index variable de contexte que vous pouvez utiliser à l'intérieur d'un foreach (ou template avec foreach param). Docs: http://knockoutjs.com/documentation/binding-context.html

    Si vous êtes d'accord avec l'utilisation de jQuery Templates {{each}}alors quelque chose comme ceci:

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

    Si vous avez à utiliser le foreach option, puis quelque chose de ce genre:

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

    Edit: ces jours-ci, je préfère créer un abonnement à mon observableArray qui ne dispose que de prendre un seul passage à travers la matrice, et de créer ou définir un indice observable sur l'élément. Comme: 

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

    Exemple ici: http://jsfiddle.net/rniemeyer/CXBFN/

    ou vous pouvez prendre cette idée et d'étendre observableArrays de fournir un indexed fonction vous permet de configurer simplement en appelant myObservableArray.indexed().

    Voici un exemple: http://jsfiddle.net/rniemeyer/nEgqY/

  2. 16

    C'est beaucoup plus facile avec knock-out 2.1.0 et ci-dessus:

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

    Pas de fantaisie, les scripts nécessaires.

    Un mot de prudence: attr: { id : 'item' + $index } ne fonctionnera PAS. Depuis $index est une fonction elle-même, ne pas ajouter les parenthèses à cause de votre identité, la concaténation de "item" et l'ensemble de définition de la fonction de!

  3. 1

    Eu le même problème, mais avec un dependantObservable comme source pour le foreach modèle,
    hélas le ko.utils.arrayIndexOf n'a pas fonctionné...

    Solution: créé une fonction qui recréé le tableau renvoyé par la dependantObservable et simplement utilisé le js indexOf fonction à la Rubrique:

    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 voilà, l'indice attendu dans le jQuery tpl.