jQuery模板插件：如何创建双向绑定？ [英] jQuery templates plugin: how to create two-way binding?

问题描述

我开始使用jQuery模板插件（一个微软创建的），但现在我面对这个问题：模板是一堆绑定到一个对象数组的表单;当我在其中一个表单上更改某些内容时，我想要绑定对象进行更新，我无法弄清楚如何自动化。

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

 code><！ - 模板 - > 
< script type =text / htmlid =tmplTest> 
< input type =textvalue =$ {textvalue}/> 
< / script> 
 
<！ - 要绑定的对象 - > 
< script type =text / javascript> 
 var obj = [{textvalue：text1}，{textvalue：text2} 
 
 jQuery（＃tmplTest）。tmpl（obj）
& / script> 
  

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

解决方案

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

然而，对于双向数据绑定，我发现 knockoutjs 扩展更好，更干净。 声明性的语法保持标记清晰，而自定义数据绑定覆盖允许多个应用程序。最后，映射插件非常适合将JSON从服务器处理为绑定。最后，knockoutjs也有基于tmpl插件的绑定。

祝你有问题。

编辑：更新代码示例

需要的刀片：

 < script src =/ Scripts / jquery-1.5.0.min。 jstype =text / javascript>< / script> 
< script src =/ Scripts / jquery.tmpl.jstype =text / javascript>< / script> 
< script src =/ Scripts / knockout.jstype =text / javascript>< / script> 
< script src =/ Scripts / knockout.mapping.jstype =text / javascript>< / script> 
  

然后这里是肉和土豆

 <！ -  div用于加载模板 - > 
< div data-bind ='template：{name：tmplTest，foreach：viewModel.list}'> 
< / div> 
 
<！ - 你的模板 - > 
< 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> 
  

I started using jQuery templates plugin (the one Microsoft created), but now I face this problem: the template is for a bunch of forms bound to an array of objects; when I change something on one of the forms, I want the bound object to update and I can't figure out how to automate that.

Here's a simple example (real life template and object are much more complex) :

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

This will populate two textboxes, each bound to a value from corresponding object. Now, if I change a value in one of the textboxes, I need to update corresponding data object's value. Any idea how to do that?

解决方案

jQuery template doesn't actually implement two-way data binding, but another Microsoft developed jQuery plugin does. This Scott Guthrie post actually covers both the tmpl plug in and Data Linking plugin. Scroll down to "Support for Client Data-Linking" where Scott goes into detail on how the Data Linking plug in works.

However, for two way data binding, i find the knockoutjs extension to be much better and cleaner. The declarative syntax keeps the markup clean and the custom data binding overrides allow for a multitude of applications. Finally the mapping plugin is pretty great for processing JSON from the server into binding. Finally knockoutjs also has bindings based on tmpl plugin as well.

Good luck with your problem.

EDIT: updated Code Example

Scrips required:

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

Then here is the meat and potatoes

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

这篇关于jQuery模板插件：如何创建双向绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！