Backbone.View "el"혼란

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"태그만큼 넓을 수 있습니다.

참고 URL : https://stackoverflow.com/questions/5624929/backbone-view-el-confusion