กระดูกสันหลังดู "el" สับสน

มุมมองควรelได้รับการจัดการอย่างไร? จะต้องมีการตั้งค่ามิฉะนั้นเหตุการณ์จะไม่เริ่มทำงาน (ดูที่นี่ )

แต่มันควรจะเป็นองค์ประกอบที่มีอยู่แล้วในหน้าหรือไม่? ในแอปของฉันฉันสร้างเทมเพลต (jQuery Templates) ลงใน Fancybox 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 ฉันคิดว่าการประชุมคือการแสดงเนื้อหาของคุณเป็นเอล ดังนั้นเอลจึงทำหน้าที่เป็นจุดขึ้นลงหรือภาชนะสำหรับวางเนื้อหาที่เป็นเทมเพลตของคุณ จากนั้นแบ็กโบนจะเชื่อมโยงเหตุการณ์กับข้อมูลโมเดลที่อยู่ภายใน

เมื่อคุณสร้างมุมมองที่คุณสามารถจัดการกับเอลในสี่วิธีใช้el:, tagName:, และclassName: id:หากไม่มีสิ่งเหล่านี้ถูกประกาศว่าค่าเริ่มต้นเป็น div ที่ไม่มี id หรือ class นอกจากนี้ยังไม่เกี่ยวข้องกับเพจในตอนนี้ คุณสามารถเปลี่ยนแท็กเป็นอย่างอื่นได้โดยใช้ tagName (เช่นtagName: "li"จะให้เอลของคุณ<li></li>) คุณสามารถตั้งค่า id และคลาสของ el ได้เช่นเดียวกัน ยังคง el ไม่ได้เป็นส่วนหนึ่งของเพจของคุณ คุณสมบัติ el ช่วยให้คุณสามารถจัดการกับเกรนของวัตถุ el ได้อย่างละเอียดมาก ส่วนใหญ่ฉันใช้ไฟล์el: $("someElementInThePage")ซึ่งจะผูกการจัดการทั้งหมดที่คุณทำกับ 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"