Bind template-Element auf den index des array in KnockoutJS

Brauche ich, um den Namen des <div>'s in einer KnockoutJS-Vorlage entsprechend der position, die Sie in der Liste erscheinen für ein Jquery-plugin, etwa so:

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

Gibt es eine Möglichkeit, zu binden, um den index des Elements im array mit KnockoutJS?
Es wäre eine Schande, wenn ich hatte, um diese Daten in den select auf die Datenbank mit ROWINDEX.

InformationsquelleAutor jaffa | 2011-05-18

  1. 21

    update: KO unterstützt nun eine $index Kontext-variable, die Sie verwenden können, innerhalb ein foreach (oder template mit foreach param). Docs: http://knockoutjs.com/documentation/binding-context.html

    Wenn Sie okay sind mit den jQuery-Templates {{each}}, dann so etwas wie dies funktionieren wird:

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

    Wenn Sie hatten die foreach option, dann so etwas wie dies funktionieren würde:

    <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: in diesen Tagen ich lieber ein Abonnement, um meine observableArray, hat nur einen Durchgang durch das array und erstellen/festlegen einen index beobachtbaren auf das Element. Wie: 

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

    Beispiel hier: http://jsfiddle.net/rniemeyer/CXBFN/

    oder Sie können diese Idee und erweitern observableArrays, um eine indexed - Funktion, die es Ihnen ermöglichen, setzen Sie diesen einfach durch Aufruf myObservableArray.indexed().

    Hier ist ein Beispiel: http://jsfiddle.net/rniemeyer/nEgqY/

    Eine weitere Möglichkeit, mit der zweiten Methode ist, fügen Sie eine "Index" - Eigenschaft, um Ihr Modell liefert den gleichen Wert wie ko.utils.arrayIndexOf(.. etc - die ich gefunden habe, dass hat mein problem gelöst auf eine Reihe von Gelegenheiten 🙂
    Das Letzte Geige mit der indizierten () - Methode ist einfach der beste Teil der Antwort, wie es ist leicht wiederverwendbar.
    Das ist genial! Prost!

    InformationsquelleAutor RP Niemeyer

  2. 16

    Dies ist viel einfacher, mit Ko 2.1.0 und höher:

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

    Keine Lust auf Skripte notwendig.

    Ein Wort der Vorsicht: attr: { id : 'item' + $index } wird NICHT funktionieren. Da $index ist eine Funktion, die sich nicht fügen Sie die Klammern bewirken, dass Ihre id zu sein, die Verkettung von 'Element' und die gesamte Funktion definition!

    InformationsquelleAutor jkschneider

  3. 1

    Hatte das gleiche problem, aber mit einem dependantObservable als Quelle für die foreach-Vorlage,
    leider ist der ko.utils.arrayIndexOf hat nicht funktioniert...

    Lösung: wurde eine Funktion erstellt, neu erstellt das array zurückgegeben von der dependantObservable und benutzte einfach den js indexOf-Funktion mit dem Item:

    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à, der erwartet, dass der index in der jQuery-tpl.

    InformationsquelleAutor Mat

Schreibe einen Kommentar