0

ですから、これをやろうとしたのは私が初めてではないと確信していますが、私がやろうとしていることと一致する例が見つからないので、ここにいます.

そのように定義された Knockout カスタム バインディングがあります。

 ko.bindingHandlers.table = {
    init: function (element, valueAccessor) {
        value = ko.unwrap(valueAccessor());
        //Create a table
};

目標は、テーブルを作成したいユーザーが JavaScript について知っておく必要があることを最小限に抑えることです。提供してほしい HTML は次のようなものです。

data-bind="table: foo, columns: ['id', 'first name', 'last name', ect...]"></table>

列を配列のような形式で指定できるようにしたいです (ここでも、JS を使用しないようにしています)。col1: 'id', col2: 'first name' のようなばかげたことができることは承知していますが、作成するときに .length() を簡単に実行できるオブジェクト/配列が必要です私のテーブル。

Jqueryを使用してデータを操作する回避策がありますが、できればこのようなことをしたいと思います。

最後になりましたが、リースではありませんが、allBindings アクセサーを介してオブジェクトにアクセスできると想定しています。間違っている場合はお知らせください。前もって感謝します。

4

1 に答える 1

2

おそらく、既存のテーブル bindingHandlers のいずれかを使用する方がよいでしょう。Knockout Contribの KO Grid、@MichaelBest が推奨する上記の表、または既に存在するその他の表のいずれかです。

あなたの質問について; 配列のバインドは思った通り簡単です。バインドに配列を入力する (または配列を保持するプロパティにバインドする) だけです。bindingHandlerただし、複数のバインディングから設定を読み取るためにa を使用することについて本当に質問しています。これを行うには、パラメータのinit/update関数の3 番目のパラメータを使用bindingHandlerしallBindingsます。

このようなバインディングの簡単な例は次のとおりです。

ko.bindingHandlers['table'] = {
    init: function(element, valueAccessor, allBindings){
        var data = ko.unwrap(valueAccessor());
        var columns = allBindings.get('columns');
        var table = document.createElement('table');
        for(var i = 0; i < data.length; i++){
            var currentItem = data[i];
            var row = document.createElement('tr');
            for(var j = 0; j < columns.length; j++){
                var column = document.createElement('td');
                column.innerText = currentItem[columns[j]];
                row.appendChild(column);
            }
            table.appendChild(row);
        }
        element.appendChild(table);
    }
};

bindingHandler次に、次のように使用します。

<div data-bind="table:data, columns: ['id','firstName']"></div>

http://jsfiddle.net/TK9y2/に上記のバインディングを使用した実用的なサンプルがあります。

このパラメーターは、探している名前のバインディングがあるかどうかを確認するために使用する必要があるメソッドallBindingsも提供することに注意してください。hasこれについては、カスタム バインディングに関する Knockout のドキュメントを参照してください。

于 2014-04-16T06:32:04.133 に答える