javascript - jQuery 模板插件 : how to create two-way binding?

Question

我开始使用 jQuery 模板插件(微软创建的插件)，但现在我面临这个问题:模板用于绑定(bind)到对象数组的一堆表单；当我更改其中一个表单上的某些内容时，我希望更新绑定(bind)的对象，但我不知道如何自动执行该操作。

这是一个简单的示例(现实生活中的模板和对象要复杂得多):

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

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

Answer 1

jQuery 模板实际上并未实现双向数据绑定(bind)，但另一个 Microsoft 开发的 jQuery 插件却实现了。这个Scott Guthrie post实际上涵盖了 tmpl 插件和数据链接插件。向下滚动到“支持客户端数据链接”，其中 Scott 详细介绍了数据链接插件的工作原理。

但是，对于双向数据绑定(bind)，我找到 knockoutjs扩展变得更好、更干净。 declarative语法保持标记干净，custom data binding overrides允许多种应用程序。最后是mapping plugin对于将来自服务器的 JSON 处理为绑定(bind)非常有用。最后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>    

然后这是肉和土 bean

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