Tôi có thể liên kết đầu vào biểu mẫu với các mô hình trong Backbone.js mà không theo dõi các sự kiện mờ theo cách thủ công không?

Question

Tôi có ứng dụng backbone.js (www.github.com/juggy/job-board) nơi tôi muốn ràng buộc biểu mẫu nhập của tôi trực tiếp vào mô hình của tôi (la la Sproutcore).

Có thể với Backbone.js (hoặc các công cụ khác) mà không thực sự theo dõi từng sự kiện mờ trên đầu vào và cập nhật mô hình theo cách thủ công không? Điều này có vẻ như rất nhiều mã keo.

Cảm ơn,
Julien

Answer 1

Tôi không chắc chắn như thế nào SC thực hiện nó nhưng có lẽ họ nghe cho các sự kiện quá.

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

Có một cách hay hơn để xử lý nếu mô hình của bạn có nhiều thuộc tính trong đó.

Có sự phụ thuộc vào các yếu tố đầu vào của bạn có id giống với tên của thuộc tính trong mô hình của bạn.

Answer 3

Tôi nghĩ rằng đây là một trình dọn dẹp (và có thể nhanh hơn) cách để tạo ra một đối tượng từ một yếu tố đầu vào

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

mà không jquery:

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

Answer 4

tôi đang làm việc trên corset, một hình thức thư viện cho backbone.js lấy cảm hứng từ mô-đun hình thức django, nhưng một chút ít tham vọng trong phạm vi. Vẫn làm việc ra các kinks, nhưng nó sẽ kết thúc trên github khi ít nhất là bán ổn định và chức năng.

Mục đích của corset là có các lớp trường được phân lớp dễ dàng để bạn có thể tạo các đầu vào phức tạp cho các trường hợp sử dụng phức tạp hơn (các lựa chọn xếp tầng, v.v ...). Cách tiếp cận này ám chỉ mỗi trường dưới dạng một khung nhìn riêng biệt và khung nhìn biểu mẫu được ràng buộc với một mô hình và sử dụng các sự kiện thay đổi, sự kiện mờ hoặc gửi các sự kiện để cập nhật mô hình (cấu hình, làm mờ là mặc định). Mỗi khung nhìn có một hàm getData có thể ghi đè trên mỗi bản đồ mặc định cho hàm jquery .val().

Sử dụng mặc định hợp lý và chức năng modelFormFactory, chúng tôi sử dụng corset (hoặc tập con của nó thực sự được thực hiện) để phát triển nhanh, xác định mô hình sử dụng tên thuộc tính hợp lý, sử dụng modelFormFactory và bạn có giao diện người dùng chỉnh sửa tức thì.

Answer 5

tôi tạo ra các kỹ thuật sau đây trên trang web của tôi

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) 

Tôi đã trình bày chi tiết các phần mở rộng để xương sống bạn cần phải thực hiện trên blog của tôi

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

nó sử dụng phong cách tường thuật tương tự như thuộc tính sự kiện cho các phần tử biểu mẫu ràng buộc để mô hình các thuộc tính

và đây là mã thực tế triển khai lớp học cho bạn trong 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 

    @ 

Ứng dụng nếu bạn không thích coffeescript. Tôi làm. Mọi người đều khác nhau :)

Answer 6

Bạn đã thử Backbone.ModelBinder chưa?Đó là một công cụ tốt để làm những gì bạn cần: https://github.com/theironcook/Backbone.ModelBinder