Могу ли я связывать входы формы к моделям в backbone.js без развевающихся событий размытия вручную?

Question

У меня есть приложение Backbone.js (www.github.com/juggy/job-board.) Где я хочу связать мою форму ввода непосредственно к моей модели (A La Sprocoutcore).

Возможно ли с backbone.js (или другими инструментами), не отслеживая каждое размытие событий на входах и обновляя модель вручную? Это похоже на много кода клея.

Спасибо,
Julien

Answer 1

Я не уверен, как 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()});
  }
});

Answer 2

Существует еще наилучший способ справиться с этим, если ваша модель включает в себя множество свойств в нем.

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

На ваших входных элементах есть зависимость от ваших входных элементов, имеющих то же самое, что то же самое, что имя свойства в вашей модели.

Answer 3

Я думаю, что это очиститель (и, возможно, быстрее) способ создать объект из входного элемента

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

Answer 4

Вы пробовали Backbone.ModelBinder? Это хороший инструмент, чтобы делать то, что вам нужно: https://github.com/theironcook/backbone.modelbinder.modelbinder.

Answer 5

Я работаю над корсет, библиотека формы для Backbone.js, вдохновленной модулем Django Forms, но чуть менее амбициозно по объему. Все еще разрабатывая откиды, но оно заканчивается на Github, когда хотя бы полустабильный и функциональный.

Целью корсета состоит в том, чтобы иметь легко подклассы полевые классы, чтобы вы могли создавать сложные входы для более сложных случаев использования (каскадные выборы и т. Д.). Этот подход оказывает каждое поле в качестве отдельного представления, а вид формы связан с моделью и использует события изменений, размытия событий или отправки событий для обновления модели (настраиваемого, размытия по умолчанию). Каждый представление имеет переопределенную функцию GetData, которая по умолчанию отображается на функцию jQuery .val ().

Используя разумные значения по умолчанию и функцию модификации, мы используем корсет (или подмножество того, что на самом деле сделано еще) для быстрого развития, определите модель с использованием разумных имен атрибутов, используйте модификацию UI.

Answer 6

Я создал следующую технику на моем сайте

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

    @

Appologiesic, если вы не любите CoffeeScript. Я делаю. Все разные :)