JQuery Tmpl和数据绑定一起工作

Question

我试图得到数据绑定和tmpl - 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>

但是我如何将孩子的名字数据链接回原始对象?

Answer 1

你可能想看看knockout.js
它使用jquery模板和自己的绑定机制。

Answer 2

.link()目前不支持嵌套数组或您正在寻找的对象。您很可能想要扁平化JSON对象以利用数据链接:http://jsfiddle.net/rUrXF/1/

嵌套对象似乎有一个问题:https://github.com/jquery/jquery-datalink/issues/24