Backbone.Xem nhầm lẫn "el"

Một lượt xem elnên được xử lý như thế nào? Nó phải được thiết lập, nếu không các sự kiện không kích hoạt (xem tại đây ).

Nhưng nó có phải là một phần tử đã có trên trang không? Trong ứng dụng của mình, tôi kết xuất một mẫu (jQuery Templates) vào Fancybox. Điều gì nên elđược trong trường hợp đó?

Một khung nhìn el là nơi tất cả các ràng buộc sự kiện diễn ra. Bạn không cần phải sử dụng nó nhưng nếu bạn muốn xương sống để kích hoạt các sự kiện, bạn cần thực hiện công việc kết xuất của mình trên el. Chế độ xem el là một phần tử DOM nhưng nó không nhất thiết phải là một phần tử có từ trước. Nó sẽ được tạo nếu bạn không lấy một cái từ trang hiện tại của mình, nhưng bạn sẽ phải chèn nó vào trang nếu bạn muốn xem nó làm bất cứ điều gì.

Ví dụ: Tôi có một chế độ xem tạo các mục riêng lẻ

window.ItemView = Backbone.View.extend({
    tagName: "li", //this defaults to div if you don't declare it.
    template: _.template("<p><%= someModelKey %></p>"),
    events: {
         //this event will be attached to the model elements in
         //the el of every view inserted by AppView below
        "click": "someFunctionThatDoesSomething"
    },
    initialize: function () { 
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        this.el.innerHTML = this.template(this.model.toJSON());
        return this;
    }
});
window.AppView = Backbone.View.extend({
    el: $("#someElementID"), //Here we actually grab a pre-existing element
    initialize: function () { 
        _.bindAll(this, "render");
        this.render(new myModel());
    },
    render: function (item) { 
        var view = new ItemView({ model: item });
        this.el.append(view.render().el);
    }
});

Chế độ xem đầu tiên chỉ tạo các mục danh sách và chế độ xem thứ hai thực sự đặt chúng trên trang. Tôi nghĩ điều này khá giống với những gì xảy ra trong ví dụ Công việc trên trang backbone.js. Tôi nghĩ quy ước là làm cho bạn hài lòng với el. Vì vậy, el đóng vai trò như một nơi hạ cánh hoặc một nơi chứa để đặt nội dung mẫu của bạn. Sau đó, Backbone liên kết các sự kiện của nó với dữ liệu mô hình bên trong nó.

Khi bạn tạo một cái nhìn, bạn có thể thao tác các el trong bốn cách sử dụng el:, tagName:, className:, và id:. Nếu không có cái nào trong số này được khai báo thì mặc định là div không có id hoặc lớp. Nó cũng không được liên kết với trang vào thời điểm này. Bạn có thể thay đổi thẻ thành một cái gì đó khác bằng cách sử dụng tagName (ví dụ: tagName: "li"sẽ cung cấp cho bạn một số <li></li>). Bạn có thể đặt id và class của el tương tự như vậy. El vẫn chưa phải là một phần của trang của bạn. Thuộc tính el cho phép bạn thực hiện thao tác xử lý hạt rất mịn của đối tượng el. Hầu hết thời gian tôi sử dụng mộtel: $("someElementInThePage")điều này thực sự liên kết tất cả các thao tác bạn thực hiện trong chế độ xem của bạn với trang hiện tại. Mặt khác, nếu bạn muốn thấy tất cả công việc khó khăn bạn đã làm trong chế độ xem của mình hiển thị trên trang, bạn sẽ cần chèn / nối nó vào trang ở một nơi khác trong chế độ xem của bạn (có thể là trong kết xuất). Tôi thích nghĩ về el là vật chứa mà tất cả các góc nhìn của bạn điều khiển.

Bây giờ hơi cũ, nhưng tôi cũng bối rối và vì vậy đối với những người khác đến đây, trò chơi này có thể giúp ích - http://jsfiddle.net/hRndn/2/

var MyView = Backbone.View.extend({

    events: {
        "click .btn" : "sayHello",
    },

    sayHello : function() {
        alert("Hello");
    },


    render : function() {
        this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");

    }
});

$(function() {
    myView = new MyView({el:"#parent_id"});
    myView.render();
});

Bạn muốn 'el' của mình tham chiếu đến một phần tử có chứa phần tử con có bất kỳ sự kiện nào gây ra thay đổi trong chế độ xem của bạn. Có thể rộng bằng thẻ "body".