2011-11-04 40 views
5

Tôi có chế độ xem tạo và điền một Danh sách chọn. Tôi muốn để ràng buộc một sự kiện trên các sự kiện Change (Khi người sử dụng chọn một lựa chọn khác nhauKích hoạt sự kiện trên el trong Backbone View

Nó chỉ đơn giản kết quả đầu ra một cái gì đó như thế này:.

<select> 
    <option value="id">ID Name</option 
</select> 

The View:

App.Views.SessionList = Backbone.View.extend({ 
    tagName: 'select', 
    id: 'sessionList', 
    events: { 
     'change': 'selectionChanged' 
    }, 
    initialize: function() { 
     // Load Collection 
     _.bindAll(this, 'selectionChanged'); 

     this.template = _.template($('#optionsTemplate').html()); 
     this.Sessiontemplate = _.template($('#session_template').html()); 
     this.SelectedSessiontemplate = _.template($('#selected_session_template').html()); 

     // Create Collection 
     this.SessionList = new App.Collections.SessionList(); 

     // Set Bindings 
     this.SessionList.bind('add', this.addSession, this); 
     this.SessionList.bind('reset', this.addSessions, this); 


     this.render(); 

     this.SessionList.fetch(); 
    }, 
    render: function() { 

     return this; 
    }, 
    addSession: function (item, num) { 
     if (num === 0) { 
      $(this.el).append(this.SelectedSessiontemplate(item.toJSON())); 
      console.log("Selected"); 
     } 
     else { 
      $(this.el).append(this.Sessiontemplate(item.toJSON())); 
     } 
    }, 
    addSessions: function() { 
     var self = this; 
     // Add all Rows 
     for (var i = 0; i < self.SessionList.models.length; i++) { 
      this.addSession(self.SessionList.models[i], i); 
     } 
    }, 
    selectionChanged: function (e) { 
     var field = $(e.currentTarget); 
     var value = $("option:selected", field).val(); 
    } 
}); 

Mẫu phiên chỉ đơn giản là:

<option value="{{Id}}">{{Name}}</option> 

Sự kiện không bao giờ được kích hoạt và có vẻ như nó không bị ràng buộc chính xác. Tôi muốn kích hoạt nó trên sự thay đổi của danh sách lựa chọn.

Ban đầu tôi nghĩ rằng tôi có thể đang gặp sự cố tương tự: backbone.js events and el, tuy nhiên nó không hoạt động trong trường hợp này.

Trả lời

6

Thật khó để gỡ lỗi trực tiếp vấn đề của bạn, bởi vì chúng tôi không có tất cả thông tin (những gì hiện SessionList trông giống như ... các mẫu, v.v ...).

NHƯNG, tôi đã ghép nối ví dụ của bạn với một số mã nơi sự kiện diễn ra, thực sự hiệu quả. Hy vọng rằng, bạn có thể xây dựng nó từ đó? Bạn có thể fork the jsFiddle nếu bạn muốn đến một nơi mà nó không cho bạn và chúng tôi có thể cố gắng giúp đỡ thêm.

window.App = { Views: {} }; 

App.Views.SessionList = Backbone.View.extend({ 
    tagName: 'select', 

    events: { 
     'change': 'selectionChanged' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'selectionChanged'); 
     this.render(); 
    }, 

    render: function() { 
     $(this.el).append('<option value="foo">Option 1</option>'); 
     $(this.el).append('<option value="bar">Option 2</option>');     
     return this; 
    }, 

    selectionChanged: function (e) { 
     var value = $(e.currentTarget).val(); 
     console.log("SELECTED", value); 
    } 
}); 

var view = new App.Views.SessionList(); 
$("body").append(view.el); 

Cho mã đó, bạn sẽ nhận được nhật ký bảng điều khiển với giá trị mỗi khi bạn chọn một mục.

Vì bạn không nhận được điều đó, tôi đoán bạn đang nhìn thấy một ngoại lệ hoặc một cái gì đó như thế? Trình gỡ lỗi của bạn có cung cấp cho bạn bất kỳ gợi ý nào không?

Chúc may mắn!

+0

Ngớ ngẩn, nhưng Chrome đang lưu vào bộ nhớ cache trang và các bản cập nhật không được hiển thị ngay cả sau nhiều lần thử. Nhưng, tôi đã sử dụng fiddle của bạn, cho phép tôi xây dựng và sửa chữa một số thứ. Cảm ơn bạn! – Hyper

Các vấn đề liên quan