web-dev-qa-db-ja.com

knockout.jsテンプレートのアイテムのインデックスにアクセスする方法

以下のtbodyのテンプレート内で、レンダリングされているアイテムのインデックスにアクセスするにはどうすればよいですか？

<table>
        <tbody data-bind="foreach:contacts">
            <tr class="contactRow" valign="top">
            <td><a href="#" data-bind="click: function(){viewModel.removeContact($data)}">Delete</td>
            <td><input data-bind="value: FirstName" name="Contacts[].FirstName"/></td>
            <td><input data-bind="value: LastName" name= "Contacts[].LastName"  /></td>
            <td><input data-bind="value: Username"  name="Contacts[].Username"/></td>
            <td><input data-bind="value: Email"   name="Contacts[].Email"/></td>
        </tr>
        </tbody>
        <thead>
            <tr>
                <th>Controls</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>
knockout.js
16
ek_ny

更新：$indexがKO2.1で利用可能になりました。

現在、foreachのインデックスに直接アクセスする方法はありません。ここに$index変数の追加を検討するプルリクエストがあります： https://github.com/SteveSanderson/knockout/pull/182

私が過去に使用したオプションは、監視可能なインデックスの同期を維持する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/

17
RP Niemeyer

私はこれをやっていて、それはかなりうまく機能しています。見栄えは良くありませんが、すべてを整然と保ちます。

Attr：bindingを使用してフィールドのname属性を設定してから、$parent.CallForwards.indexOf($data)を使用してインデックスを取得します。

data-bind="value: Name, attr: {name: 'CallForwards[' + $parent.CallForwards.indexOf($data) + '].Name'}"
6
Lucent Fox

KO 2.1を使用すると、より簡単になると思います。foreachループで$ indexを使用して、現在のインデックスを参照できます。

https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js

ドキュメント： http://knockoutjs.com/documentation/binding-context.html

4
leDamien