什么是双向绑定?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (41)

我读过很多关于主干不能进行双向绑定的文章,但是我并不完全理解这个概念。

有人能给我一个例子,说明在MVC代码库中双向绑定是如何工作的,以及它如何不与主干结合吗?

提问于
用户回答回答于

双向约束意味着:

  1. 当模型中的属性被更新时,UI也会更新。
  2. 当UI元素被更新时,更改将被传播回模型。

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

用户回答回答于

双向绑定意味着影响模型的任何与数据相关的更改都是立即传播对匹配视图,并且视图中所做的任何更改(例如,用户所做的)是立即反射在底层模型中。当应用程序数据发生变化时,UI也会发生变化,反之也是如此。

在此基础上构建Web应用程序是一个非常坚实的概念,因为它使“模型”抽象成为应用程序中任何地方都可以使用的安全的原子数据源。比如说,如果绑定到视图的模型发生了变化,那么它匹配的UI部分(视图)将反映这一点.并且,用户界面(视图)的匹配块可以安全地用作收集用户输入/数据的手段,从而维护应用程序数据的最新更新。

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

那就相当了不真实说脊梁不是支撑双向绑定:虽然不是框架的核心特性,但它可以很简单地使用主干的事件来执行。对于简单的情况,它要花费几行显式代码;对于更复杂的绑定,它可能会变得相当危险。下面是一个简单的案例(未经测试的代码,只是为了说明而临时编写的):

Model = Backbone.Model.extend
  defaults:
    data: ''

View = Backbone.View.extend
  template: _.template("Edit the data: <input type='text' value='<%= 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(未经测试的代码,参见上面)中会类似于这样:

<div ng-app="app" ng-controller="MainCtrl">
  Edit the data:
  <input name="mymodel.data" ng-model="mymodel.data">
</div>
angular.module('app', [])
  .controller 'MainCtrl', ($scope) ->
    $scope.mymodel = {data: ''}

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

以Epoxy为例,可以将原始的主干应用程序重新加工成如下所示:

Model = Backbone.Model.extend
  defaults:
    data: ''

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

  bindings:
    'input': 'value:data'

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

model: new Model()
view = new View {el: $('.someEl'), model: model}

总之,几乎所有的“主流”JS框架都支持双向绑定。其中一些,如脊骨,确实需要额外的工作才能工作。顺利,但这些都是相同的,没有强制采取一种具体的方式,首先。所以这真的是关于你的精神状态。

一种不同的web应用程序架构,通过循环模式促进单向绑定。它基于在任何数据更改时快速、全面地重新呈现UI组件的概念,以确保一致性,并使代码/数据流更容易推理。在同样的趋势下,可能需要检查mvi(模型-视图-意图)的概念.

扫码关注云+社区