entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://knockoutjs.com/documentation/value-binding.html|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/actteam/4e84d48983f445299302e49c0ddfdbd1.jpg|imageAlt|2|http://jsfiddle.net/Xm5eH/9/|blocks|key|dhbcg|text|双向绑定只意味着：|unstyled|depth|inlineStyleRanges|entityRanges|drk0k|当模型中的属性更新时，UI也会更新。|3bk3t|当UI元素更新时，更改将传播回模型。|77ra8|Backbone没有#2的“内置”实现(尽管你当然可以使用事件侦听器来实现)。其他框架like+Knockout+do+wire+up+two-way+binding+automagically...。|offset|length|fgs68|​|cp5d7|8fnfe|76qa5|?|atomic|25sbt|cmuqg|8fehn|在Backbone中，您可以通过将视图的"render“方法绑定到其模型的"change”事件来轻松实现#1。要实现#2，您还需要向input元素添加一个更改侦听器，并调用model.set在处理程序中。|2s1ip|Here's+a+Fiddle在主干中设置双向绑定。|style|UNDERLINE^0|0|0|0|17|1I|0|0|0|0|0|0|1|1|0|0|0|0|0|F|0|F|2^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|A|4|B|6|$C|D|E|-4]]|F|$2|3|4|5|6|$7|G]]]|H|@$I|J|K|L|2|M|N|1D|O|@]|P|@]|6|$]]|$I|Q|K|R|2|M|N|1E|O|@]|P|@]|6|$]]|$I|S|K|T|2|M|N|1F|O|@]|P|@]|6|$]]|$I|U|K|V|2|M|N|1G|O|@]|P|@$W|1H|X|1I|I|1J]]|6|$]]|$I|Y|K|Z|2|M|N|1K|O|@]|P|@]|6|$]]|$I|10|K|Z|2|M|N|1L|O|@]|P|@]|6|$]]|$I|11|K|-4|2|M|N|1M|O|@]|P|@]|6|$]]|$I|12|K|13|2|14|N|1N|O|@]|P|@$W|1O|X|1P|I|1Q]]|6|$]]|$I|15|K|-4|2|M|N|1R|O|@]|P|@]|6|$]]|$I|16|K|Z|2|M|N|1S|O|@]|P|@]|6|$]]|$I|17|K|18|2|M|N|1T|O|@]|P|@]|6|$]]|$I|19|K|1A|2|M|N|1U|O|@$W|1V|X|1W|1B|1C]]|P|@$W|1X|X|1Y|I|1Z]]|6|$]]]]

Two-way binding just means that:
<ol>
<li>When properties in the model get updated, so does the UI.</li>
<li>When UI elements get updated, the changes get propagated back to the model.</li>
</ol>
Backbone doesn't have a &quot;baked-in&quot; implementation of #2 (although you can certainly do it using event listeners). Other frameworks <a href="http://knockoutjs.com/documentation/value-binding.html" rel="noreferrer">like Knockout do wire up two-way binding automagically</a>.
 
<a href="https://i.stack.imgur.com/2wouW.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/2wouW.jpg" alt="enter image description here" /></a>
<hr/>
In Backbone, you can easily achieve #1 by binding a view's &quot;render&quot; method to its model's &quot;change&quot; event. To achieve #2, you need to also add a change listener to the input element, and call <code>model.set</code> in the handler.
<a href="http://jsfiddle.net/Xm5eH/9/" rel="noreferrer">Here's a Fiddle</a> with two-way binding set up in Backbone.

entityMap|blocks|key|a2t17|text|McGarnagle有一个很好的答案，你会想要接受他的答案，但我想我应该提到(既然你问了)数据绑定是如何工作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fvbfe|它通常是通过在数据发生更改时触发事件来实现的，这会导致监听器(例如UI)更新。|4t65q|双向绑定的工作原理是这样做两次，但要小心一点，以确保不会陷入事件循环(事件的更新会引发另一个事件)。|6g3eu|我本想把这个写在评论里，但是它太长了.^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

McGarnagle has a great answer, and you'll want to be accepting his, but I thought I'd mention (since you asked) how databinding works.

It's generally implemented by firing events whenever a change is made to the data, which then causes listeners (e.g. the UI) to be updated.

Two-way binding works by doing this twice, with a bit of care taken to ensure that you don't wind up stuck in an event loop (where the update from the event causes another event to be fired).

I was gonna put this in a comment, but it was getting pretty long...

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/documentcloud/backbone/wiki/Extensions,-Plugins,-Resources|blocks|key|qm0o|text|值得一提的是，有许多不同的解决方案提供了双向绑定，并且玩得非常好。|unstyled|depth|inlineStyleRanges|entityRanges|4gm4c|我对这个模型活页夹有一个愉快的体验-|adbi9|https://github.com/theironcook/Backbone.ModelBinder|bd8d2|..。这提供了合理的默认值，同时也提供了大量模型属性到输入元素的自定义jquery选择器映射。|5pp30|上有更多的backbone扩展/插件列表github|offset|length|style|UNDERLINE|9k401^0|0|0|0|0|K|6|K|6|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|V|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|W|G|@]|H|@]|6|$]]|$A|K|C|L|2|E|F|X|G|@]|H|@]|6|$]]|$A|M|C|N|2|E|F|Y|G|@]|H|@]|6|$]]|$A|O|C|P|2|E|F|Z|G|@$Q|10|R|11|S|T]]|H|@$Q|12|R|13|A|14]]|6|$]]|$A|U|C|-4|2|E|F|15|G|@]|H|@]|6|$]]]]

Worth mentioning that there are many different solutions which offer two way binding and play really nicely.

I have had a pleasant experience with this model binder - <a href="https://github.com/theironcook/Backbone.ModelBinder" rel="nofollow">https://github.com/theironcook/Backbone.ModelBinder</a>. which gives sensible defaults yet a lot of custom jquery selector mapping of model attributes to input elements.

There is a more extended list of backbone extensions/plugins on <a href="https://github.com/documentcloud/backbone/wiki/Extensions,-Plugins,-Resources" rel="nofollow">github</a>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://emberjs.com/|1|http://emberjs.com/guides/object-model/bindings/|blocks|key|9ob0f|text|实际上emberjs支持双向绑定，这是javascript+MVC框架最强大的特性之一。你可以查看它提到的地方binding在其用户指南中。|unstyled|depth|inlineStyleRanges|offset|length|style|UNDERLINE|CODE|entityRanges|2i50s|对于emberjs，创建双向绑定是通过在末尾创建一个字符串绑定的新属性，然后从全局作用域指定路径：|7t6e2|App.wife+=+Ember.Object.create({
++householdIncome:+80000
});

App.husband+=+Ember.Object.create({
++householdIncomeBinding:+'App.wife.householdIncome'
});

App.husband.get('householdIncome');+//+80000

//+Someone+gets+raise.
App.husband.set('householdIncome',+90000);
App.wife.get('householdIncome');+//+90000|code-block|syntax|javascript|7mvkn|请注意，绑定不会立即更新。在同步更改之前，Ember会等待所有应用程序代码完成运行，因此您可以随意多次更改绑定属性，而不必担心当值是瞬态时同步绑定的开销。|96c6a|希望对选择原始答案有所帮助。^0|3|7|1J|7|3|7|1J|7|3|7|0|1J|7|1|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|10|I|@$J|11|K|12|L|M]|$J|13|K|14|L|M]|$J|15|K|16|L|N]|$J|17|K|18|L|N]]|O|@$J|19|K|1A|C|1B]|$J|1C|K|1D|C|1E]]|6|$]]|$C|P|E|Q|2|G|H|1F|I|@]|O|@]|6|$]]|$C|R|E|S|2|T|H|1G|I|@]|O|@]|6|$U|V]]|$C|W|E|X|2|G|H|1H|I|@]|O|@]|6|$]]|$C|Y|E|Z|2|G|H|1I|I|@]|O|@]|6|$]]]]

Actually <a href="http://emberjs.com/" rel="nofollow"><code>emberjs</code></a> supports two-way binding, which is one of the most powerful feature for a javascript MVC framework. You can check it out where it mentioning <a href="http://emberjs.com/guides/object-model/bindings/" rel="nofollow"><code>binding</code></a> in its user guide.

for emberjs, to create two way binding is by creating a new property with the string Binding at the end, then specifying a path from the global scope:

<pre><code>App.wife = Ember.Object.create({
 householdIncome: 80000
});

App.husband = Ember.Object.create({
 householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // 80000

// Someone gets raise.
App.husband.set('householdIncome', 90000);
App.wife.get('householdIncome'); // 90000
</code></pre>

Note that bindings don't update immediately. Ember waits until all of your application code has finished running before synchronizing changes, so you can change a bound property as many times as you'd like without worrying about the overhead of syncing bindings when values are transient.

Hope it helps in extend of original answer selected.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/theironcook/Backbone.ModelBinder|1|http://emberjs.com/|2|http://knockoutjs.com/|3|http://epoxyjs.org/|4|http://nytimes.github.io/backbone.stickit/|5|6|https://facebook.github.io/flux/|7|https://github.com/staltz/cycle|blocks|key|boq1n|text|双向绑定意味着影响模型的任何与数据相关的更改都是立即传播|unstyled|depth|inlineStyleRanges|entityRanges|bgar5|匹配的视图，并且在视图中所做的任何更改(例如，由用户进行的)都是立即反映在底层模型中。当应用程序数据更改时，UI也会更改，反之亦然。|mess|在此基础上构建web应用程序是一个非常可靠的概念，因为它使“模型”抽象成为一个安全的原子数据源，可以在应用程序中的任何地方使用。比方说，如果绑定到视图的模型发生变化，那么其匹配的UI部分(视图)将反映这一点，不管发生什么..。并且可以安全地使用匹配的UI片段(视图)作为收集用户输入/数据的手段，以便保持应用程序数据是最新的。|9co6f|从开发人员的角度来看，一个好的双向绑定实现显然应该使模型和一些视图之间的这种连接尽可能简单。|65j7l|然后它就会变得很安静不真实说Backbone不是支持双向绑定:虽然不是框架的核心特性，但它可以非常简单地使用Backbone的事件来执行。对于简单的情况，它需要几行显式的代码；对于更复杂的绑定，它可能会变得非常危险。下面是一个简单的例子(未经测试的代码，只是为了说明而快速编写)：|br35d|Model+=+Backbone.Model.extend
++defaults:
++++data:+''

View+=+Backbone.View.extend
++template: _.template("Edit+the+data:+")

++events:
++++#+Listen+for+user+inputs,+and+edit+the+model.
++++'change+input':+@setData

++initialize:+(options)+->
++++#+Listen+for+model's+edition,+and+trigger+UI+update
++++@listenTo+@model,+'change:data',+@render

++render:+->
++++@$el.html+@template(@model.attributes)
++++@

++setData:+(e)+=>
++++e.preventDefault()
++++@model.set+'data',+$(e.currentTarget).value()

model:+new+Model()
view+=+new+View+{el:+$('.someEl'),+model:+model}|code-block|syntax|javascript|bc25i|这是原始主干应用程序中非常典型的模式。正如人们所看到的，它需要相当数量的(相当标准的)代码。|c2385|AngularJS以及其他一些替代方案(Ember,+Knockout…)提供双向绑定作为第一公民功能。他们在一些DSL下抽象了许多边缘案例，并尽最大努力将双向绑定集成到他们的生态系统中。我们的示例与AngularJS类似(未测试的代码，见上)：|offset|length|ainjm|Edit+the+data:|7f1mc|angular.module('app',+[])
++.controller+'MainCtrl',+($scope)+->
++++$scope.mymodel+=+{data:+''}|a2q7n|相当短！|gfs|但是，请注意，有些完全成熟双向绑定扩展确实存在对于Backbone也是如此(按照复杂性递减的原始主观顺序)：Epoxy,+Stickit,+ModelBinder…|style|UNDERLINE|bl3aj|dc5lb|例如，使用Epoxy的一个很酷的事情是，它允许您在模板(+DOM+)或视图实现(JavaScript)中声明绑定(模型属性<->视图的DOM元素)。有些人非常不喜欢在DOM/模板中添加“指令”(比如ng-*AngularJS所需的属性或Ember的数据绑定属性)。|avodm|以环氧树脂为例，您可以将原始的主干应用程序修改为如下所示(…)：|esqps|Model+=+Backbone.Model.extend
++defaults:
++++data:+''

View+=+Backbone.Epoxy.View.extend
++template: _.template("Edit+the+data:+")
++#+or,+using+the+inline+form:+

++bindings:
++++'input':+'value:data'

++render:+->
++++@$el.html+@template(@model.attributes)
++++@

model:+new+Model()
view+=+new+View+{el:+$('.someEl'),+model:+model}|bls6m|总而言之，几乎所有的“主流”JS框架都支持双向绑定。它们中的一些，例如Backbone，确实需要一些额外的工作才能使其工作|db5te|顺畅，但这些都是相同的，它们一开始并没有强制执行特定的方法。所以这实际上是关于你的精神状态。|ceand|此外，您可能会对以下内容感兴趣Flux流量，一种不同的体系结构，用于通过循环模式促进单向绑定的web应用程序。它基于在任何数据更改时快速、整体地重新呈现UI组件的概念，以确保内聚性，并使代码/数据流的推理变得更容易。在相同的趋势中，您可能想要检查MVI+(模型-视图-意图)的概念，例如Cycle.循环..。^0|0|0|0|0|0|0|0|0|9|0|K|5|1|R|8|2|0|0|0|0|1I|5|1I|5|3|1P|7|4|1Y|B|5|0|0|0|0|0|0|0|F|4|6|3Z|5|7^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]|B|$2|3|4|5|6|$7|C]]|D|$2|3|4|5|6|$7|E]]|F|$2|3|4|5|6|$7|G]]|H|$2|3|4|5|6|$7|8]]|I|$2|3|4|5|6|$7|J]]|K|$2|3|4|5|6|$7|L]]]|M|@$N|O|P|Q|2|R|S|21|T|@]|U|@]|6|$]]|$N|V|P|W|2|R|S|22|T|@]|U|@]|6|$]]|$N|X|P|Y|2|R|S|23|T|@]|U|@]|6|$]]|$N|Z|P|10|2|R|S|24|T|@]|U|@]|6|$]]|$N|11|P|12|2|R|S|25|T|@]|U|@]|6|$]]|$N|13|P|14|2|15|S|26|T|@]|U|@]|6|$16|17]]|$N|18|P|19|2|R|S|27|T|@]|U|@]|6|$]]|$N|1A|P|1B|2|R|S|28|T|@]|U|@$1C|29|1D|2A|N|2B]|$1C|2C|1D|2D|N|2E]|$1C|2F|1D|2G|N|2H]]|6|$]]|$N|1E|P|1F|2|15|S|2I|T|@]|U|@]|6|$16|17]]|$N|1G|P|1H|2|15|S|2J|T|@]|U|@]|6|$16|17]]|$N|1I|P|1J|2|R|S|2K|T|@]|U|@]|6|$]]|$N|1K|P|1L|2|R|S|2L|T|@$1C|2M|1D|2N|1M|1N]]|U|@$1C|2O|1D|2P|N|2Q]|$1C|2R|1D|2S|N|2T]|$1C|2U|1D|2V|N|2W]]|6|$]]|$N|1O|P|-4|2|R|S|2X|T|@]|U|@]|6|$]]|$N|1P|P|1Q|2|R|S|2Y|T|@]|U|@]|6|$]]|$N|1R|P|1S|2|R|S|2Z|T|@]|U|@]|6|$]]|$N|1T|P|1U|2|15|S|30|T|@]|U|@]|6|$16|17]]|$N|1V|P|1W|2|R|S|31|T|@]|U|@]|6|$]]|$N|1X|P|1Y|2|R|S|32|T|@]|U|@]|6|$]]|$N|1Z|P|20|2|R|S|33|T|@]|U|@$1C|34|1D|35|N|36]|$1C|37|1D|38|N|39]]|6|$]]]]

Two-way binding means that any data-related changes affecting the model are immediately propagated to the matching view(s), and that any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model. When app data changes, so does the UI, and conversely.

This is a very solid concept to build a web application on top of, because it makes the "Model" abstraction a safe, atomic data source to use everywhere within the application. Say, if a model, bound to a view, changes, then its matching piece of UI (the view) will reflect that, no matter what. And the matching piece of UI (the view) can safely be used as a mean of collecting user inputs/data, so as to maintain the application data up-to-date.

A good two-way binding implementation should obviously make this connection between a model and some view(s) as simple as possible, from a developper point of view.

It is then quite untrue to say that Backbone does not support two-way binding: while not a core feature of the framework, it can be performed quite simply using Backbone's Events though. It costs a few explicit lines of code for the simple cases; and can become quite hazardous for more complex bindings. Here is a simple case (untested code, written on the fly just for the sake of illustration):

<pre class="lang-coffeescript prettyprint-override"><code>Model = Backbone.Model.extend
 defaults:
 data: ''

View = Backbone.View.extend
 template: _.template("Edit the data: &lt;input type='text' value='&lt;%= data %&gt;' /&gt;")

 events:
 # Listen for user inputs, and edit the model.
 'change input': @setData

 initialize: (options) -&gt;
 # Listen for model's edition, and trigger UI update
 @listenTo @model, 'change:data', @render

 render: -&gt;
 @$el.html @template(@model.attributes)
 @

 setData: (e) =&gt;
 e.preventDefault()
 @model.set 'data', $(e.currentTarget).value()

model: new Model()
view = new View {el: $('.someEl'), model: model}
</code></pre>

This is a pretty typical pattern in a raw Backbone application. As one can see, it requires a decent amount of (pretty standard) code.

<a href="https://github.com/theironcook/Backbone.ModelBinder" rel="noreferrer">AngularJS</a> and some other alternatives (<a href="http://emberjs.com/" rel="noreferrer">Ember</a>, <a href="http://knockoutjs.com/" rel="noreferrer">Knockout</a>…) provide two-way binding as a first-citizen feature. They abstract many edge-cases under some DSL, and do their best at integrating two-way binding within their ecosystem. Our example would look something like this with AngularJS (untested code, see above):

<pre class="lang-html prettyprint-override"><code>&lt;div ng-app="app" ng-controller="MainCtrl"&gt;
 Edit the data:
 &lt;input name="mymodel.data" ng-model="mymodel.data"&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-coffeescript prettyprint-override"><code>angular.module('app', [])
 .controller 'MainCtrl', ($scope) -&gt;
 $scope.mymodel = {data: ''}
</code></pre>

Rather short!

But, be aware that some fully-fledged two-way binding extensions do exist for Backbone as well (in raw, subjective order of decreasing complexity): <a href="http://epoxyjs.org/" rel="noreferrer">Epoxy</a>, <a href="http://nytimes.github.io/backbone.stickit/" rel="noreferrer">Stickit</a>, <a href="https://github.com/theironcook/Backbone.ModelBinder" rel="noreferrer">ModelBinder</a>…

One cool thing with Epoxy, for instance, is that it allows you to declare your bindings (model attributes &lt;-> view's DOM element) either within the template (DOM), or within the view implementation (JavaScript). Some people strongly dislike adding "directives" to the DOM/template (such as the ng-* attributes required by AngularJS, or the data-bind attributes of Ember).

Taking Epoxy as an example, one can rework the raw Backbone application into something like this (…):

<pre class="lang-coffeescript prettyprint-override"><code>Model = Backbone.Model.extend
 defaults:
 data: ''

View = Backbone.Epoxy.View.extend
 template: _.template("Edit the data: &lt;input type='text' /&gt;")
 # or, using the inline form: &lt;input type='text' data-bind='value:data' /&gt;

 bindings:
 'input': 'value:data'

 render: -&gt;
 @$el.html @template(@model.attributes)
 @

model: new Model()
view = new View {el: $('.someEl'), model: model}
</code></pre>

All in all, pretty much all "mainstream" JS frameworks support two-way binding. Some of them, such as Backbone, do require some extra work to make it work smoothly, but those are the same which do not enforce a specific way to do it, to begin with. So it is really about your state of mind.

Also, you may be interested in <a href="https://facebook.github.io/flux/" rel="noreferrer">Flux</a>, a different architecture for web applications promoting one-way binding through a circular pattern. It is based on the concept of fast, holistic re-rendering of UI components upon any data change to ensure cohesiveness and make it easier to reason about the code/dataflow. In the same trend, you might want to check the concept of MVI (Model-View-Intent), for instance <a href="https://github.com/staltz/cycle" rel="noreferrer">Cycle</a>.

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/dfc46f520ddffd4cb360d60b695d591b.png|imageAlt|blocks|key|9s8kd|text|双向数据绑定：|unstyled|depth|inlineStyleRanges|entityRanges|2l326|当模型中的数据更改时，视图会反映更改，当视图中的数据更改时，模型也会更新。|3brlg|注意:这会立即自动发生，这将确保模型和视图始终更新。|ci15d|​|dikkv|2ars9|?|atomic|offset|length|b83b6|4q877^0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|X|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|Y|H|@]|I|@]|6|$]]|$B|L|D|M|2|F|G|Z|H|@]|I|@]|6|$]]|$B|N|D|O|2|F|G|10|H|@]|I|@]|6|$]]|$B|P|D|-4|2|F|G|11|H|@]|I|@]|6|$]]|$B|Q|D|R|2|S|G|12|H|@]|I|@$T|13|U|14|B|15]]|6|$]]|$B|V|D|-4|2|F|G|16|H|@]|I|@]|6|$]]|$B|W|D|O|2|F|G|17|H|@]|I|@]|6|$]]]]

Two-way data binding
When data in the model(business logic) changes, the view(html) reflects the change, and when data in the view changes, the model is updated as well.
Note: This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
<a href="https://i.stack.imgur.com/yRae8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yRae8.png" alt="enter image description here" /></a>
Why we need Two-way data binding?
Two Way Data Binding is used to develop real-time, interactive application. This type of application is known as SPA(Single Page Application), developed in modern frameworks like Angular.js, React.js and Vue.js

I have read lots that Backbone doesn't do two way binding but I don't exactly understand this concept.

Could somebody give me an example of how two way binding works in an MVC codebase and how it does not with Backbone?

What is two way binding?

数据流

 我读过很多关于Backbone不做双向绑定的文章，但我并不完全理解这个概念。 谁能给我一个例子，说明双向绑定是如何在MVC代码库中工作的，以及它是如何不与Backbone一起工作的？

问什么是双向绑定？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是双向绑定？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是双向绑定？
EN