2

我开始使用 jQuery 模板插件（微软创建的那个），但现在我遇到了这个问题：模板用于绑定到对象数组的一堆表单；当我在其中一个表单上更改某些内容时，我希望绑定对象更新，但我不知道如何自动化。

这是一个简单的例子（现实生活中的模板和对象要复杂得多）：

<!-- Template -->
<script type="text/html" id="tmplTest">
    <input type="text" value="${textvalue}"/>
</script>

<!-- object to bind -->
<script type="text/javascript">
    var obj = [{textvalue : "text1"},{textvalue : "text2"}]

    jQuery("#tmplTest").tmpl(obj)
</script>

这将填充两个文本框，每个文本框都绑定到相应对象的值。现在，如果我更改其中一个文本框中的值，我需要更新相应数据对象的值。知道怎么做吗？

4

2 回答 2

9

jQuery 模板实际上并没有实现双向数据绑定，但是另一个 Microsoft 开发的 jQuery 插件可以实现。这篇Scott Guthrie 的帖子实际上涵盖了 tmpl 插件和 Data Linking 插件。向下滚动到“支持客户端数据链接”，Scott 详细介绍了数据链接插件的工作原理。

但是，对于双向数据绑定，我发现knockoutjs扩展更好更简洁。声明式语法使标记保持干净，并且自定义数据绑定覆盖允许大量应用程序。最后，映射插件非常适合将来自服务器的 JSON 处理为绑定。最后，knockoutjs 也有基于 tmpl 插件的绑定。

祝你的问题好运。

编辑：更新的代码示例

所需手稿：

<script src="/Scripts/jquery-1.5.0.min.js" type="text/javascript"></script>    
<script src="/Scripts/jquery.tmpl.js" type="text/javascript"></script> 
<script src="/Scripts/knockout.js" type="text/javascript"></script>      
<script src="/Scripts/knockout.mapping.js" type="text/javascript"></script>

然后是肉和土豆

<!-- div for loading the template -->
<div data-bind='template: { name: "tmplTest", foreach: viewModel.list }'>    
</div>

<!-- your template -->
<script type='text/html' id='tmplTest'>
    <div>        
        <span data-bind='text: textvalue, uniqueName: true'></span>
        <input data-bind='value: textvalue, uniqueName: true, valueUpdate:"afterkeydown"'/>
    </div>
</script>

<script type='text/javascript'>
       var viewModel = ko.mapping.fromJS(
        {            
            list:[  { textvalue: "text1" },
                    { textvalue: "text2"}   ]
                }); 

        $(function() {
            ko.applyBindings(viewModel);
        });
 </script>
于 2011-02-23T21:00:12.273 回答
0

您可以编写自己的数据链接。注意：我需要索引来完成这项工作，所以我将您的数据添加到一个数组中，并将每个放在模板中。如果有人知道如何在不使用 each 的情况下获取索引，请添加:) jsfiddle 链接

<script type="text/html" id="tmplTest">
    {{each inputs}}
    <input type="text" class="datalink" data-key="textvalue" data-index="${$index}" value="${$value.textvalue}"/>
    {{/each}}
</script>
<div id="output"></div>


$.extend(window, {
    data:[
        {inputs: [{textvalue:"text1"},{textvalue:"text2"}]}
    ]
});

$('#output').append($("#tmplTest").tmpl(window.data));

$('#output .datalink').live('change', function(){ // update object on change
    var $this = $(this),
        d = $this.data();
    window.data[0].inputs[d.index*1][d.key] = $this.val();
    console.log(window.data[0].inputs);
});
于 2011-02-23T20:58:47.390 回答