0

誰かが以下のようなviewModelのobservableArrayのノックアウトでテーブルを作成する方法を教えてもらえますか？

foreachバインディングなどを使用していることは知っていますが、5つの配列アイテムごとに新しいTR行を作成する必要があります。テーブルはこれまでのところだけで、基本的にチェックボックス項目を揃える必要があります。divにチェックボックスを追加するだけでテーブルがなくても機能するようになりました（ただし、チェックボックスがすべて揃っているわけではありません）が、セル内で物事をうまく並べておくためにテーブルが必要です。

これは私が行ったコードで投稿した記事ですが、それらすべてを1つのTRに入れようとしましたが、それは機能しません。別の男が同様のことをしようとしていますが、ノックアウトを使用していません...

通常のjqueryと外部テンプレートエンジンを使用してやりたいことを行う方法は知っていますが、すべてを行うための優れたノックアウトバインディングテンプレートの方法がある場合は、jqueryを避けようとしています。

テーブルにいくつかのブートストラップクラスを追加するかもしれませんが、確かではありませんが、このフレームワークをWebサイトの他の部分にも使用しています。しかし、ノックアウトのものにもっと焦点を当てます。

第1条

第2条

function someModel() {
    var self = this;
    self.items = ko.observableArray([]); 
}

配列アイテムは次のようなクラスです：

function item(name, id) {
    var self = this;
    self.Name = name;
    self.Id = id;
}
4

1 に答える 1

2

より複雑なデータ構造が必要な場合は、依存するオブザーバブルを使用することをお勧めします。それぞれ最大5tdsの一連の行が必要だと想定しています。

function someModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.items_grouped = ko.computed(function(){
        var grouped = [];
        var itemlist = self.items();
        for(var i = 0; i < itemlist.length; i+=5){
            var row = [];
            grouped.push(row);
            for(var j = 0; j < 5; ++j){
                row.push(itemlist[i+j]);
            }
        }
        return grouped;
    });
}

<table>
    <tbody data-bind="foreach: items_grouped">
        <tr data-bind="foreach: $data">
            <td>
                <span data-bind="text: Name"></span>
                <span data-bind="text: Id"></span>
            </td>
        </tr>
    </tbody>
</table>

もちろん、手元にあるライブラリを使用して、クラスタリングの実装をよりクリーンにすることができます。ちなみに、レイアウトにテーブルを使用することは、ほとんどの場合、悪い考えです。

于 2013-01-24T06:02:55.443 に答える