Backbone.View "el"혼란

뷰는 어떻게 el처리 되어야 합니까? 설정해야합니다. 그렇지 않으면 이벤트가 발생하지 않습니다 ( 여기 참조 ).

그러나 이미 페이지에있는 요소 여야합니까? 내 앱에서 (jQuery Templates) 템플릿을 Fancybox로 렌더링합니다. el그 경우에는 무엇을해야 합니까?

보기 el은 모든 이벤트 바인딩이 발생하는 곳입니다. 사용할 필요는 없지만 백본이 이벤트를 발생 시키려면 el에서 렌더링 작업을 수행해야합니다. 보기 el은 DOM 요소이지만 기존 요소 일 필요는 없습니다. 현재 페이지에서 하나를 가져 오지 않으면 생성되지만 어떤 작업을 수행하는 것을 보려면 페이지에 삽입해야합니다.

예 : 개별 항목을 생성하는보기가 있습니다.

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

첫 번째보기는 목록 항목을 만들고 두 번째보기는 실제로 항목을 페이지에 배치합니다. 나는 이것이 backbone.js 사이트 의 ToDo 예제 에서 일어나는 것과 매우 유사하다고 생각합니다 . 나는 관습이 당신에게 콘텐츠를 엘로 렌더링하는 것이라고 생각합니다. 따라서 el은 템플릿 콘텐츠를 배치하기위한 랜딩 장소 또는 컨테이너 역할을합니다. 그런 다음 Backbone은 이벤트를 내부의 모델 데이터에 바인딩합니다.

당신이보기를 만들 때 사용하는 4 가지 방법으로 엘을 조작 할 수 있습니다 el:, tagName:, className:,와 id:. 이들 중 어느 것도 선언되지 않으면 el ​​기본값은 id 또는 클래스가없는 div입니다. 이 시점에서 페이지와도 연결되지 않습니다. tagName을 사용하여 태그를 다른 것으로 변경할 수 있습니다 (예 : tagName: "li"는 el of를 제공합니다 <li></li>). el의 id와 class도 마찬가지로 설정할 수 있습니다. 여전히 el은 페이지의 일부가 아닙니다. el 속성을 사용하면 el 객체를 매우 미세하게 조작 할 수 있습니다. 대부분의 경우 나는el: $("someElementInThePage")실제로보기에서 el에 수행하는 모든 조작을 현재 페이지에 바인딩합니다. 그렇지 않으면보기에서 수행 한 모든 노력이 페이지에 표시되도록하려면보기의 다른 위치 (아마도 렌더링)에 페이지를 삽입 / 추가해야합니다. 나는 el을 당신의 모든 관점이 조작하는 컨테이너라고 생각하고 싶습니다.

지금은 조금 늙었지만 나도 혼란스러워서 여기에 오는 다른 사람들에게이 바이올린이 도움이 될 수 있습니다-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();
});

'el'이 뷰의 변경을 트리거하는 이벤트가있는 하위 요소를 포함하는 요소를 참조하도록합니다. "body"태그만큼 넓을 수 있습니다.