1

私は、データ バインディングと tmpls (jquery プラグインをうまく連携させるため) を取得しようとしています。したがって、テンプレートを使用してデータをレンダリングし、データ バインディングを使用してそれをオブジェクトにフックしたいと考えています。例えば：

var items = [{ Name: 'Barak Obama', Phone: '555-1212' },
             { Name: 'George Bush', Phone: '444-2222'}];

function addItems() {
    $("MyList").html("");
    for (var index in items) {
        $("#ListTmpl").tmpl(items[index]).link(items[index]).appendTo("#MyList");
    }
};

次のようなテンプレートを使用します。

<script id="ListTmpl" type="text/x-jquery-tmpl">
    <li>
        <input id="Name" value="${Name}" />
        <input id="Phone" value="${Phone}" />
    </li>
</script>

ただし、問題があるのは、アイテムに配列を含めて、{{each}} よりもレンダリングすることです。

var items = [{ Name: 'Barak Obama', Phone: '555-1212',
             kids: [{Name: "Malia"}, {Name: "Sasha"}] },
             { Name: 'George Bush', Phone: '444-2222'},
             kids: [{Name: "Barbara"}, {Name: "Jenna"}] }];

そして、このようなテンプレート:

<script id="ListTmpl" type="text/x-jquery-tmpl">
    <li>
        <input id="Name" value="${Name}" />
        <input id="Phone" value="${Phone}" />
        <ul>
        {{each kids}}
           <li> ${Name}
        {{/each}}
        </ul>

しかし、子供の名前のデータを元のオブジェクトにリンクするにはどうすればよいでしょうか?

4

2 に答える 2

1

あなたはknockout.jsを見たいかもしれません
それはjqueryテンプレートとそれ自身のバインディングメカニズムを使用します。

于 2011-04-29T06:11:27.490 に答える
0

.link() は現在、探しているようなネストされた配列またはオブジェクトをサポートしていません。JSON オブジェクトをフラット化して、データリンクを利用することをお勧めします: http://jsfiddle.net/rUrXF/1/

ネストされたオブジェクトに対して未解決の問題があるようです: https://github.com/jquery/jquery-datalink/issues/24

于 2011-04-29T05:55:46.793 に答える