0

次のようなjsonデータがあります。

var js = {
    headers: [{
        name: 'Id',
        editable: false
    }, {
        name: 'Name',
        editable: true
    }],
    data: [
        [1, 'Ajay'],
        [2, 'Ankur']
    ]
};

目標は、上記のデータから表要素を生成することです。ヘッダーには、その特定の列のデータを静的テキストとしてレンダリングする必要があるかどうか、または (editableプロパティを介して) テキスト ボックスにレンダリングする必要があるかどうかを示す情報が含まれています。

このシナリオのノックアウト データ バインドを記述する方法は?

これは私が持っている距離です：

<table border="1" style="border-collapse:collapse">
    <thead>
        <tr data-bind="foreach: Headers">
            <th data-bind="text: $data.name"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Rows">
        <tr data-bind="foreach: $data">
            <!-- what to do here...?!!! -->               
        </tr>
    </tbody>
</table>

これが私が使用しようとしたフィドルです：http://jsfiddle.net/deostroll/mLLrk/

4

3 に答える 3

2

KO インライン ステートメントを使用できます。

<tbody data-bind="foreach: Rows">
        <tr data-bind="foreach: $data">               

            <!-- ko if: someCondition -->
             <td>Some Content</td>
            <!-- /ko --> 


        </tr>
    </tbody>

ここで例を参照してください (最後に移動)

アップデート：

OK、問題が発生しました。for ループに入っているため、ViewModel のコンテキストが失われているため、VM 属性を呼び出すには、次を使用する必要があります$root。

<!-- ko if: $root.renderTextBox -->

フィドルを参照してください: http://jsfiddle.net/mLLrk/1/

于 2013-08-06T14:14:03.363 に答える
0

条件付きで表示しているもので URL フェッチが発生する場合は、ノックアウトが URL を非表示にする前に、ブラウザーによって URL がフェッチされることに注意してください。

このようなことを行うと、条件付きでテンプレートをロードできます

    <figure data-bind="template: { name: supportsVideo ? 'unveil-video' : 'unveil-image-sequence' }"></figure>

    <script type="text/html" id="unveil-video">           
        <video class="benefit-video" data-crossorigin="anonymous" preload="auto">
            ...
        </video>
    </script>

    <script type="text/html" id="unveil-image-sequence">
        <div class="unveil-image-sequence"></div>
    </script>
于 2015-06-30T21:19:41.010 に答える
0

属性をオンにするかオフにするかを決定したい場合は、次のようなバインディングを作成できます。

data-bind="attr: {contenteditable: editable}"

デモ

値に応じて異なる HTML をレンダリングする場合は、仮想要素を使用できます (テーブル内で便利です)。

<!-- ko if: editable -->
    <input type="text" />
<!-- /ko -->
<!-- ko ifnot: editable -->
    <span></span>
<!-- /ko -->

デモ

于 2013-08-06T14:16:20.447 に答える