블러 이벤트를 수동으로 추적하지 않고 Backbone.js의 모델에 양식 입력을 바인딩 할 수 있습니까?

블러 이벤트를 수동으로 추적하지 않고 Backbone.js의 모델에 양식 입력을 바인딩 할 수 있습니까?

---

양식 입력을 내 모델 (a la Sproutcore)에 직접 바인딩하려는 backbone.js 앱 ( www.github.com/juggy/job-board )이 있습니다.

실제로 입력에서 각 흐림 이벤트를 추적하고 수동으로 모델을 업데이트하지 않고도 Backbone.js (또는 다른 도구)를 사용할 수 있습니까? 이것은 많은 접착제 코드처럼 보입니다.

고마워,
줄리앙

---

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()});
  }
});

---

모델에 많은 속성이 포함 된 경우이를 처리하는 더 좋은 방법이 있습니다.

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를 가진 입력 요소에 의존합니다.

---

나는 이것이 입력 요소에서 객체를 만드는 더 깨끗한 (그리고 아마도 더 빠른) 방법이라고 생각합니다.

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);
},

---

Backbone.ModelBinder를 사용해 보셨습니까? 필요한 것을 할 수있는 좋은 도구입니다 : https://github.com/theironcook/Backbone.ModelBinder

---

저는 django 양식 모듈에서 영감을 얻은 backbone.js 용 양식 라이브러리 인 corset을 작업하고 있지만 범위가 약간 덜 야심적입니다. 여전히 꼬임을 해결하고 있지만 최소한 반 안정적이고 기능적 일 때 github에서 끝날 것입니다.

코르셋의 목적은보다 복잡한 사용 사례 (계단식 선택 등)를위한 복잡한 입력을 구축 할 수 있도록 쉽게 하위 클래스 화 된 필드 클래스를 갖는 것입니다. 이 접근 방식은 각 필드를 별도의보기로 렌더링하고 양식보기는 모델에 바인딩되며 변경 이벤트, 흐림 이벤트 또는 제출 이벤트를 사용하여 모델을 업데이트합니다 (구성 가능, 흐림이 기본값 임). 각 뷰에는 기본적으로 jquery .val () 함수에 매핑되는 재정의 가능한 getData 함수가 있습니다.

합리적인 기본값과 modelFormFactory 함수를 사용하여 빠른 개발을 위해 코르셋 (또는 아직 실제로 수행 된 하위 집합)을 사용하고, 합리적인 속성 이름을 사용하여 모델을 정의하고, modelFormFactory를 사용하면 즉각적인 UI 편집이 가능합니다.

---

내 사이트에 다음 기술을 만들었습니다.

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 """
      <form>
        <input class="address"/>
        <input class="name"/>
        <input class="email"/>
      </form>
    """

    super

    @


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

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

내 블로그에서 만들어야하는 백본 확장에 대해 자세히 설명했습니다.

http://xtargets.com/2011/06/11/binding-model-attributes-to-form-elements-with-backbone-js/

양식 요소를 모델 속성에 바인딩하기 위해 이벤트 속성과 동일한 선언적 스타일을 사용합니다.

그리고 여기 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가 마음에 들지 않으면 사과하십시오. 나는한다. 다들 다릅니다 :)

참고 URL : https://stackoverflow.com/questions/4074636/can-i-bind-form-inputs-to-models-in-backbone-js-without-manually-tracking-blur-e