3

列A、B、Cを持ち、データを入力するという動的テーブルを作成しています。また、チェックボックスとしてA、B、Cを持つリストボックスが1つあるため、選択したチェックボックスに基づいて列を表示しています。リストボックスからB、C、AではなくB、Cのみのテーブルを作成できます。このシナリオのjqueryテンプレートを作成し、Knockout.jsを使用してデータバインドを作成することを探していますが、これでテンプレートを使用できるかどうかは疑問です私のテーブルは動的すぎるため、私の質問は、このシナリオでノックアウトを使用できるかどうかです。そうでない場合は、プレーンなjqueryを使用するという私のアプローチが正しいオプションになります。

私がjqueryアプローチに従っている場合、ViewとViewModelを分離するという私の考えが問題になります。この場合、View Modelにはjquery関連のビュー操作があります

これに関するサンプルは非常に役立ちます。

よろしくお願いいたします。 サジェシュ・ナンビア

4

2 に答える 2

10

ノックアウトを使用して、テーブルの列を簡単に非表示/表示できます。シンプルですが効果的な方法はvisible、列のバインディングを使用してその可視性を制御することです。

これはアイデアを示すフィドルです: http://jsfiddle.net/Ex9J9/42/

編集 - Knockout リソースの 404 エラーを修正するためにフィドルを更新

見る：

<h4>Select Columns:</h4>
<ul data-bind="foreach: gridOptions.columns">
    <li>
        <label>
            <input type="checkbox" data-bind="checked: isVisible" /> <span data-bind="text: header"></span>
        </label>
    </li>
</ul>
<hr>
<table>
    <thead>
        <tr data-bind="foreach: gridOptions.columns">
            <th data-bind="visible:isVisible, text: header"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr data-bind="foreach: $parent.gridOptions.columns">
            <td data-bind="text: $parent[dataMember], visible:isVisible"></td>
        </tr>
    </tbody>
</table>

ビュー モデル:

var vm = {
    gridOptions: {
        columns: [{
            header: 'First Name',
            dataMember: 'firstName',
            isVisible: ko.observable(true)
        }, {
            header: 'Last Name',
            dataMember: 'lastName',
            isVisible: ko.observable(true)
        }]
    },

    people: [{
        firstName: 'Bert',
        lastName: 'Bertington'
    }, {
        firstName: 'Charles',
        lastName: 'Charlesforth'
    }, {
        firstName: 'Denise',
        lastName: 'Dentiste'
    }]
};

ko.applyBindings(vm);
于 2013-04-22T01:07:45.017 に答える
0

オプションが 3 つほど小さい場合は、3 つのテンプレートを作成し、ページで次のようにします。

<!-- ko 'if': AIsSelectedAndNotBOrC == true -->
//display the tmeplate
<!-- /ko -->

// 他のバリエーションに対してこれを行います...

これは機能しますが、多くのバリエーションがある場合、面倒すぎる可能性があります.

于 2013-04-22T00:47:18.123 に答える