189

Backboneが双方向バインディングを行わないことをたくさん読んだことがありますが、この概念を正確に理解していません。

誰かがMVCコードベースで双方向バインディングがどのように機能するかとBackboneでどのように機能しないかの例を教えてもらえますか？

4

6 に答える 6

273

双方向バインディングとは、次のことを意味します。

  1. モデルのプロパティが更新されると、UI も更新されます。
  2. UI 要素が更新されると、変更がモデルに反映されます。

Backbone には #2 の「組み込み」実装はありません (ただし、イベント リスナーを使用して実装することはできます)。Knockout のような他のフレームワークは、双方向バインディングを自動的に結び付けます。


ここに画像の説明を入力

Backbone では、ビューの「render」メソッドをそのモデルの「change」イベントにバインドすることで、簡単に #1 を達成できます。#2 を実現するには、入力要素に変更リスナーを追加model.setし、ハンドラーを呼び出す必要もあります。

Backbone で双方向バインディングが設定された Fiddle を次に示します。

于 2012-11-22T02:11:38.400 に答える
50

双方向バインディングとは、モデルに影響を与えるデータ関連の変更が一致するビューにすぐに反映され、ビューで (たとえば、ユーザーによって) 行われた変更が基になるモデルにすぐに反映されることを意味します。 . アプリのデータが変更されると、UI も変更されます。

これは、「モデル」の抽象化をアプリケーション内のどこでも使用できる安全なアトミック データ ソースにするため、その上に Web アプリケーションを構築するための非常に確固たる概念です。たとえば、ビューにバインドされたモデルが変更された場合、それに対応する UI (ビュー) はそれを反映します。また、対応する 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およびその他の代替手段 ( Ember、Knockoutなど) は、第一市民機能として双方向バインディングを提供します。彼らはいくつかの DSL の下で多くのエッジ ケースを抽象化し、エコシステム内での双方向バインディングの統合に最善を尽くしています。この例は、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: ''}

かなり短いです！

ただし、Backbone にもいくつかの本格的な双方向バインディング拡張が存在することに注意してください(生の主観的な順序で複雑さが減少します): Epoxy、Stickit、ModelBinder …</p>

たとえば、Epoxy の優れた点の 1 つは、バインディング (モデル属性 <-> ビューの DOM 要素) をテンプレート (DOM) 内またはビュー実装 (JavaScript) 内で宣言できることです。DOM/テンプレートに「ディレクティブ」を追加することを強く嫌う人もいます (AngularJS で必要な ng-* 属性や Ember のデータバインド属性など)。

エポキシを例にとると、未加工のバックボーン アプリケーションを次のように作り直すことができます (…):

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 アプリケーションの別のアーキテクチャであるFluxにも興味があるかもしれません。これは、データが変更されたときに UI コンポーネントを高速で全体的に再レン​​ダリングするという概念に基づいており、まとまりを確保し、コード/データフローについての推論を容易にします。同じ傾向で、たとえばCycleなどの MVI (Model-View-Intent) の概念を確認したい場合があります。

于 2013-12-09T18:26:46.430 に答える
35

McGarnagle には素晴らしい答えがあり、あなたは彼を受け入れたいと思うでしょうが、(あなたが尋ねたので) データバインディングがどのように機能するかについて言及したいと思いました。

これは通常、データに変更が加えられるたびにイベントを発生させることによって実装されます。これにより、リスナー (UI など) が更新されます。

双方向バインディングは、これを 2 回実行することで機能しますが、イベント ループ (イベントからの更新によって別のイベントが発生する) に陥らないように注意が必要です。

コメントしようと思ったら長くなってしまった…

于 2012-11-22T02:22:59.867 に答える
2

双方向データバインディング

モデル（ビジネスロジック）のデータが変わるとビュー（html）に反映され、ビューのデータが変わるとモデルも更新されます。

注: これは、モデルとビューが常に更新されるように、即座に自動的に行われます。

ここに画像の説明を入力

双方向データ バインディングが必要な理由

双方向データ バインディングは、リアルタイムのインタラクティブなアプリケーションを開発するために使用されます。このタイプのアプリケーションは、Angular.js、React.js、Vue.js などの最新のフレームワークで開発された SPA (Single Page Application) として知られています。

于 2021-02-28T09:12:15.443 に答える
1

双方向バインディングを提供し、非常にうまく機能する多くの異なるソリューションがあることに言及する価値があります。

私はこのモデル バインダー ( https://github.com/theironcook/Backbone.ModelBinder )で楽しい経験をしました。これにより、適切なデフォルトが提供されますが、モデル属性から入力要素への多くのカスタム jquery セレクター マッピングが提供されます。

githubには、バックボーン拡張機能/プラグインのより拡張されたリストがあります。

于 2012-11-23T14:08:48.030 に答える