[javascript] Backbone.View “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을 당신의 모든 관점이 조작하는 컨테이너라고 생각하고 싶습니다.

답변

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