62


47

手動でぼかしイベントを追跡せずに、フォーム入力をBackbone.jsのモデルにバインドできますか?

私は、backbone.jsアプリ(http://www.github.com/juggy/job-board[www.github.com/juggy/job-board])を使用しており、フォーム入力を直接モデルにバインドします(スプラウトコア)。

Backbone.js(または他のツール)を使用して、入力の各ぼかしイベントを実際に追跡し、モデルを手動で更新することなく可能ですか? これは多くのグルーコードのようです。

ありがとう、+ Julien

6 Answer


53


モデルに多くのプロパティが含まれている場合、これを処理するさらに良い方法があります。

SampleView = Backbone.View.extend({
    el: "#formEl",

    events: {
        "change input": "changed",
        "change select": "changed"
    },

    initialize: function () {
        _.bindAll(this, "changed");
    },

    changed:function (evt) {
       var changed = evt.currentTarget;
       var value = $(evt.currentTarget).val();
       var obj = {};
       obj[changed.id] = value;
       this.model.set(obj);
    }
 });

モデル内のプロパティの名前と同じidを持つ入力要素に依存しています。


34


SCがどのようにそれを行うかはわかりませんが、おそらく彼らもイベントをリッスンします。

window.SomeView = Backbone.View.extend({
  events: {
    "change input.content":  "contentChanged"
  },
  initialize: function() {
    _.bindAll(this, 'contentChanged');
    this.inputContent = this.$('input.content');
  },
  contentChanged: function(e) {
    var input = this.inputContent;

    // if you use local storage save
    this.model.save({content: input.val()});

    // if you send request to server is prob. good idea to set the var and save at the end, in a blur event or in some sync. maintenance timer.
    // this.model.set({content: input.val()});
  }
});


18


私はこれが入力要素からオブジェクトを作成するためのよりクリーンな(そしておそらくより速い)方法だと思います

changed: function(evt) {
  var target = $(evt.currentTarget),
      data = {};
  data[target.attr('name')] = target.val();
  this.model.set(data);
},

jqueryなしで:

changed: function(evt) {
  var target = evt.currentTarget,
      data = {};
  data[target.name] = target.value;
  this.model.set(data);
},


12


Backbone.ModelBinderを試しましたか? 必要なことを実行するのに最適なツールです:https://github.com/theironcook/Backbone.ModelBinder


0


djangoフォームモジュールに触発された、backbone.jsのフォームライブラリであるcorsetに取り組んでいますが、スコープは少し野心的です。 まだ問題は解決していますが、少なくとも半安定で機能している場合は、githubで終了します。

コルセットの目的は、フィールドクラスを簡単にサブクラス化して、より複雑なユースケース(カスケード選択など)の複雑な入力を構築できるようにすることです。 このアプローチは、各フィールドを個別のビューとしてレンダリングし、フォームビューはモデルにバインドされ、変更イベント、ぼかしイベント、または送信イベントを使用してモデルを更新します(構成可能、ぼかしはデフォルト)。 各ビューには、デフォルトでjqueryにマップされるオーバーライド可能なgetData関数があります .val() function.

賢明なデフォルトとmodelFormFactory関数を使用して、コルセット(または実際に行われたそのサブセット)を使用して迅速な開発を行い、賢明な属性名を使用してモデルを定義し、modelFormFactoryを使用して、インスタント編集UIを作成します。


0


私のサイトで次のテクニックを作成しました

class FooView extends MyView

  tag: "div"

  modelBindings:

    "change form input.address" : "address"
    "change form input.name"    : "name"
    "change form input.email"   : "email"

  render: ->

    $(@el).html """





    """

    super

    @


# Instantiate the view
view = new FooView
  model: new Backbone.Model

$("body").html(view.el)

私のブログであなたが作る必要のあるバックボーンの拡張について詳しく説明しました

フォーム要素をモデル属性にバインドするために、eventsプロパティと同じ宣言スタイルを使用します

ここに、coffeescriptでクラスを実装する実際のコードがあります

class MyView extends Backbone.View

  render: ->

    if @model != null
      # Iterate through all bindings
      for selector, field of @modelBindings
        do (selector, field) =>
          console.log "binding #{selector} to #{field}"
          # When the model changes update the form
          # elements
          @model.bind "change:#{field}", (model, val)=>
            console.log "model[#{field}] => #{selector}"
            @$(selector).val(val)

          # When the form changes update the model
          [event, selector...] = selector.split(" ")
          selector = selector.join(" ")
          @$(selector).bind event, (ev)=>
            console.log "form[#{selector}] => #{field}"
            data = {}
            data[field] = @$(ev.target).val()
            @model.set data

          # Set the initial value of the form
          # elements
          @$(selector).val(@model.get(field))

    super

    @

coffeescriptが気に入らない場合はおologiesびします。 私がやります。 みんな違う :)