Question

我开始使用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>

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

Answer 1

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

但是，对于双向数据绑定，我发现knockoutjs扩展更好更清晰。 declarative语法使标记保持干净，custom data binding overrides允许大量应用程序。最后，mapping plugin非常适合将JSON从服务器处理为绑定。最后，knockoutjs也有bindings based on tmpl plugin。

祝你好运。

编辑：更新的代码示例

需要的脚本：

<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>

Answer 2

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

<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);
});

jQuery模板插件：如何创建双向绑定？

2 个答案:

编辑：更新的代码示例