问什么是双向绑定？

EN

双向绑定只意味着：

当模型中的属性更新时，UI也会更新。

当UI元素更新时，更改将传播回模型。

Backbone没有#2的“内置”实现(尽管你当然可以使用事件侦听器来实现)。其他框架like Knockout do wire up two-way binding automagically...。

​

​

​

在Backbone中，您可以通过将视图的"render“方法绑定到其模型的"change”事件来轻松实现#1。要实现#2，您还需要向input元素添加一个更改侦听器，并调用model.set在处理程序中。

Here's a Fiddle在主干中设置双向绑定。

双向绑定意味着影响模型的任何与数据相关的更改都是立即传播

匹配的视图，并且在视图中所做的任何更改(例如，由用户进行的)都是立即反映在底层模型中。当应用程序数据更改时，UI也会更改，反之亦然。

在此基础上构建web应用程序是一个非常可靠的概念，因为它使“模型”抽象成为一个安全的原子数据源，可以在应用程序中的任何地方使用。比方说，如果绑定到视图的模型发生变化，那么其匹配的UI部分(视图)将反映这一点，不管发生什么..。并且可以安全地使用匹配的UI片段(视图)作为收集用户输入/数据的手段，以便保持应用程序数据是最新的。

从开发人员的角度来看，一个好的双向绑定实现显然应该使模型和一些视图之间的这种连接尽可能简单。

然后它就会变得很安静不真实说Backbone不是支持双向绑定:虽然不是框架的核心特性，但它可以非常简单地使用Backbone的事件来执行。对于简单的情况，它需要几行显式的代码；对于更复杂的绑定，它可能会变得非常危险。下面是一个简单的例子(未经测试的代码，只是为了说明而快速编写)：

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}

这是原始主干应用程序中非常典型的模式。正如人们所看到的，它需要相当数量的(相当标准的)代码。

AngularJS以及其他一些替代方案(Ember, Knockout…)提供双向绑定作为第一公民功能。他们在一些DSL下抽象了许多边缘案例，并尽最大努力将双向绑定集成到他们的生态系统中。我们的示例与AngularJS类似(未测试的代码，见上)：

Edit the data:

angular.module('app', [])
  .controller 'MainCtrl', ($scope) ->
    $scope.mymodel = {data: ''}

相当短！

但是，请注意，有些完全成熟双向绑定扩展确实存在对于Backbone也是如此(按照复杂性递减的原始主观顺序)：Epoxy, Stickit, ModelBinder…

例如，使用Epoxy的一个很酷的事情是，它允许您在模板( DOM )或视图实现(JavaScript)中声明绑定(模型属性<->视图的DOM元素)。有些人非常不喜欢在DOM/模板中添加“指令”(比如ng-*AngularJS所需的属性或Ember的数据绑定属性)。

以环氧树脂为例，您可以将原始的主干应用程序修改为如下所示(…)：

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}

总而言之，几乎所有的“主流”JS框架都支持双向绑定。它们中的一些，例如Backbone，确实需要一些额外的工作才能使其工作

顺畅，但这些都是相同的，它们一开始并没有强制执行特定的方法。所以这实际上是关于你的精神状态。

此外，您可能会对以下内容感兴趣Flux流量，一种不同的体系结构，用于通过循环模式促进单向绑定的web应用程序。它基于在任何数据更改时快速、整体地重新呈现UI组件的概念，以确保内聚性，并使代码/数据流的推理变得更容易。在相同的趋势中，您可能想要检查MVI (模型-视图-意图)的概念，例如Cycle.循环..。

McGarnagle有一个很好的答案，你会想要接受他的答案，但我想我应该提到(既然你问了)数据绑定是如何工作的。

它通常是通过在数据发生更改时触发事件来实现的，这会导致监听器(例如UI)更新。

双向绑定的工作原理是这样做两次，但要小心一点，以确保不会陷入事件循环(事件的更新会引发另一个事件)。

我本想把这个写在评论里，但是它太长了.