วิธีจัดการกับการเริ่มต้นและเรนเดอร์การแสดงตัวอย่างใน Backbone.js?

ฉันมีสามวิธีที่แตกต่างกันในการเริ่มต้นและแสดงมุมมองและมุมมองย่อยและแต่ละวิธีมีปัญหาแตกต่างกัน ฉันอยากรู้ว่ามีวิธีที่ดีกว่าในการแก้ปัญหาทั้งหมดหรือไม่:

สถานการณ์สมมติที่หนึ่ง:

เริ่มต้นเด็ก ๆ ในฟังก์ชั่นเริ่มต้นของผู้ปกครอง วิธีนี้ไม่ใช่ทุกอย่างติดค้างอยู่ในการเรนเดอร์เพื่อให้มีการบล็อกน้อยลงในการเรนเดอร์

initialize : function () {

    //parent init stuff

    this.child = new Child();
},

render : function () {

    this.$el.html(this.template());

    this.child.render().appendTo(this.$('.container-placeholder');
}

ปัญหา:

• ปัญหาที่ใหญ่ที่สุดคือการเรียกใช้เรนเดอร์บนพาเรนต์เป็นครั้งที่สองจะเป็นการลบการเชื่อมโยงเหตุการณ์ของ childs ทั้งหมด (นี่เป็นเพราะวิธีการ$.html()ทำงานของ jQuery ) สิ่งนี้สามารถบรรเทาได้ด้วยการโทรthis.child.delegateEvents().render().appendTo(this.$el);แทน แต่หลังจากนั้นเป็นกรณีแรกและบ่อยที่สุดคุณกำลังทำงานมากขึ้นโดยไม่จำเป็น

• ด้วยการต่อท้ายลูกคุณบังคับให้ฟังก์ชันการเรนเดอร์มีความรู้เกี่ยวกับโครงสร้าง DOM ของผู้ปกครองเพื่อให้คุณได้รับการจัดลำดับที่คุณต้องการ ซึ่งหมายถึงการเปลี่ยนเทมเพลตอาจต้องการการปรับปรุงฟังก์ชั่นการแสดงผลของมุมมอง

สถานการณ์ที่สอง:

เตรียมใช้งานเด็ก ๆ ในinitialize()ภาพนิ่งของผู้ปกครองแต่แทนที่จะผนวกไว้ใช้setElement().delegateEvents()เพื่อตั้งค่าเด็กเป็นองค์ประกอบในแม่แบบผู้ปกครอง

initialize : function () {

    //parent init stuff

    this.child = new Child();
},

render : function () {

    this.$el.html(this.template());

    this.child.setElement(this.$('.placeholder-element')).delegateEvents().render();
}

ปัญหา:

• สิ่งนี้ทำให้มีdelegateEvents()ความจำเป็นในขณะนี้ซึ่งเป็นลบเล็กน้อยเมื่อมีความจำเป็นสำหรับการโทรครั้งต่อไปในสถานการณ์แรก

สถานการณ์ที่สาม:

เตรียมเด็กในrender()วิธีการของผู้ปกครองแทน

initialize : function () {

    //parent init stuff
},

render : function () {

    this.$el.html(this.template());

    this.child = new Child();

    this.child.appendTo($.('.container-placeholder').render();
}

ปัญหา:

• ซึ่งหมายความว่าตอนนี้ฟังก์ชั่นการเรนเดอร์จะต้องเชื่อมโยงกับตรรกะการเริ่มต้นทั้งหมดเช่นกัน

• หากฉันแก้ไขสถานะของหนึ่งในมุมมองย่อยจากนั้นเรียกเรนเดอร์บนพาเรนต์ลูกใหม่ทั้งหมดจะถูกสร้างขึ้นและสถานะปัจจุบันทั้งหมดจะหายไป ซึ่งก็ดูเหมือนว่าจะได้รับการรั่วไหลของหน่วยความจำสำหรับลูกเต๋า

อยากรู้อยากเห็นจริงๆที่จะให้คนของคุณใช้เวลากับเรื่องนี้ คุณจะใช้สถานการณ์ใด หรือมีเวทย์มนตร์ที่สี่ที่แก้ปัญหาเหล่านี้ทั้งหมด?

คุณเคยติดตามสถานะที่แสดงผลสำหรับมุมมองหรือไม่? พูดrenderedBeforeธง? ดูเหมือนจะสับสนจริงๆ

นี่เป็นคำถามที่ยอดเยี่ยม Backbone นั้นยอดเยี่ยมเพราะไม่มีข้อสันนิษฐาน แต่มันก็หมายความว่าคุณต้อง (ตัดสินใจว่าจะทำอย่างไร) ให้ทำสิ่งต่าง ๆ เช่นนี้ด้วยตัวคุณเอง หลังจากตรวจสอบสิ่งต่าง ๆ ของตัวเองฉันพบว่าฉัน (ชนิด) ใช้การผสมผสานของสถานการณ์สมมติ 1 และสถานการณ์ 2 ฉันไม่คิดว่ามีสถานการณ์เวทย์มนตร์ที่ 4 อยู่เพราะเพียงพอทุกสิ่งที่คุณทำในสถานการณ์ 1 และ 2 จะต้องเป็น เสร็จแล้ว

ฉันคิดว่ามันจะง่ายที่สุดในการอธิบายวิธีที่ฉันชอบจัดการกับตัวอย่าง ว่าฉันมีหน้าง่าย ๆ นี้แบ่งออกเป็นมุมมองที่ระบุ:

สมมติว่า HTML คือหลังจากที่ถูกเรนเดอร์แล้วสิ่งนี้:

<div id="parent">
    <div id="name">Person: Kevin Peel</div>
    <div id="info">
        First name: <span class="first_name">Kevin</span><br />
        Last name: <span class="last_name">Peel</span><br />
    </div>
    <div>Phone Numbers:</div>
    <div id="phone_numbers">
        <div>#1: 123-456-7890</div>
        <div>#2: 456-789-0123</div>
    </div>
</div>

หวังว่ามันชัดเจนว่า HTML นั้นสอดคล้องกับไดอะแกรมอย่างไร

ParentViewถือ 2 views เด็กInfoViewและPhoneListViewเช่นเดียวกับไม่กี่ divs พิเศษหนึ่งซึ่ง#nameจะต้องมีการตั้งค่าในบางจุด PhoneListViewเก็บมุมมองลูกของตัวเองอาร์เรย์ของPhoneViewรายการ

ดังนั้นคำถามที่แท้จริงของคุณ ฉันจัดการกับการเริ่มต้นและการแสดงผลแตกต่างกันไปตามประเภทการดู ฉันแบ่งมุมมองของฉันออกเป็นสองประเภทParentมุมมองและChildมุมมอง

ความแตกต่างระหว่างสิ่งเหล่านี้เป็นเรื่องง่ายParentมุมมองจะเก็บมุมมองของเด็กไว้ในขณะที่Childมุมมองไม่ได้ ดังนั้นในตัวอย่างของฉันParentViewและPhoneListViewมีParentมุมมองในขณะที่InfoViewและPhoneViewรายการที่มีChildมุมมอง

อย่างที่ฉันพูดไว้ก่อนหน้านี้ความแตกต่างที่ยิ่งใหญ่ที่สุดระหว่างสองหมวดหมู่คือเมื่อพวกเขาได้รับอนุญาตให้แสดงผล ในโลกที่สมบูรณ์แบบฉันต้องการParentมุมมองที่จะแสดงเพียงครั้งเดียว มันขึ้นอยู่กับมุมมองลูกของพวกเขาที่จะจัดการกับการเรนเดอร์ใด ๆ เมื่อมีการเปลี่ยนแปลงรูปแบบ Childในทางกลับกันฉันอนุญาตให้แสดงผลอีกครั้งเมื่อใดก็ได้ที่ต้องการเนื่องจากไม่มีมุมมองอื่นที่ต้องพึ่งพา

ในรายละเอียดเพิ่มเติมเล็กน้อยสำหรับParentมุมมองที่ฉันชอบinitializeฟังก์ชั่นของฉันที่จะทำบางสิ่ง:

1. เริ่มต้นมุมมองของฉันเอง
2. ทำให้มุมมองของฉันเอง
3. สร้างและเริ่มต้นมุมมองลูก ๆ
4. กำหนดให้เด็กแต่ละคนดูองค์ประกอบภายในมุมมองของฉัน (เช่นInfoViewจะได้รับมอบหมาย#info)

ขั้นตอนที่ 1 เป็นคำอธิบายที่ค่อนข้างดี

ขั้นตอนที่ 2 การเรนเดอร์เสร็จสิ้นเพื่อให้องค์ประกอบใด ๆ ที่มุมมองลูกพึ่งพานั้นมีอยู่ก่อนที่ฉันจะพยายามกำหนดมัน ด้วยการทำเช่นนี้ฉันรู้ว่าเด็กทุกคนeventsจะได้รับการตั้งค่าอย่างถูกต้องและฉันสามารถแสดงบล็อกของพวกเขาซ้ำได้หลายครั้งตามที่ฉันต้องการโดยไม่ต้องกังวลว่าจะต้องมอบหมายอะไรอีก ฉันไม่จริงrenderเด็ก ๆ initializationมุมมองที่นี่ผมช่วยให้พวกเขาที่จะทำภายในของตัวเอง

ขั้นตอนที่ 3 และ 4 ได้รับการจัดการในเวลาเดียวกับที่ฉันผ่านเข้าไปelในขณะที่สร้างมุมมองเด็ก ฉันชอบที่จะส่งองค์ประกอบในที่นี่เพราะฉันรู้สึกว่าผู้ปกครองควรพิจารณาว่าเด็ก ๆ ได้รับอนุญาตให้ใส่เนื้อหาในมุมมองของตัวเองได้อย่างไร

สำหรับการเรนเดอร์ฉันพยายามทำให้มันค่อนข้างง่ายสำหรับParentมุมมอง ฉันต้องการให้renderฟังก์ชั่นไม่ทำอะไรมากไปกว่าการสร้างมุมมองพาเรนต์ ไม่มีการมอบหมายกิจกรรมไม่มีการแสดงผลมุมมองลูกไม่มีอะไร เพียงแค่เรนเดอร์ที่เรียบง่าย

บางครั้งมันก็ไม่ได้ผลเสมอไป เช่นในตัวอย่างด้านบน#nameองค์ประกอบจะต้องได้รับการอัปเดตทุกครั้งที่ชื่อในโมเดลเปลี่ยนแปลง อย่างไรก็ตามบล็อกนี้เป็นส่วนหนึ่งของParentViewเทมเพลตและไม่ได้รับการจัดการโดยChildมุมมองเฉพาะดังนั้นฉันจึงแก้ไขมัน ฉันจะสร้างsubRenderฟังก์ชั่นบางอย่างที่แทนที่เฉพาะเนื้อหาของ#nameองค์ประกอบและไม่ต้องทิ้ง#parentองค์ประกอบทั้งหมด นี่อาจดูเหมือนแฮ็ค แต่ฉันพบว่ามันใช้งานได้ดีกว่าไม่ต้องกังวลเกี่ยวกับการเรนเดอร์ DOM ทั้งหมดและติดตั้งองค์ประกอบและสิ่งเหล่านี้อีกครั้ง ถ้าฉันต้องการทำให้มันสะอาดจริงๆฉันจะสร้างChildมุมมองใหม่(คล้ายกับInfoView) ที่จะจัดการกับ#nameบล็อก

ตอนนี้สำหรับChildมุมมองแล้วinitializationจะคล้ายกับParentมุมมองโดยไม่สร้างChildมุมมองเพิ่มเติมใด ๆ ดังนั้น:

1. เริ่มต้นมุมมองของฉัน
2. การตั้งค่าผูกมัดการฟังการเปลี่ยนแปลงใด ๆ กับรูปแบบที่ฉันสนใจ
3. ทำให้มุมมองของฉัน

Childelมุมมองการแสดงผลยังเป็นง่ายมากเพียงแค่การแสดงผลและการตั้งค่าเนื้อหาของฉัน อีกครั้งไม่ยุ่งกับการมอบหมายหรืออะไรอย่างนั้น

นี่คือตัวอย่างรหัสของสิ่งที่ฉันParentViewอาจมีลักษณะ:

var ParentView = Backbone.View.extend({
    el: "#parent",
    initialize: function() {
        // Step 1, (init) I want to know anytime the name changes
        this.model.bind("change:first_name", this.subRender, this);
        this.model.bind("change:last_name", this.subRender, this);

        // Step 2, render my own view
        this.render();

        // Step 3/4, create the children and assign elements
        this.infoView = new InfoView({el: "#info", model: this.model});
        this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model});
    },
    render: function() {
        // Render my template
        this.$el.html(this.template());

        // Render the name
        this.subRender();
    },
    subRender: function() {
        // Set our name block and only our name block
        $("#name").html("Person: " + this.model.first_name + " " + this.model.last_name);
    }
});

คุณสามารถดูการใช้งานของฉันsubRenderที่นี่ ด้วยการเปลี่ยนแปลงที่ถูกผูกไว้กับsubRenderแทนที่จะrenderทำให้ฉันไม่ต้องกังวลเกี่ยวกับการระเบิดและสร้างใหม่ทั้งบล็อก

นี่คือตัวอย่างโค้ดสำหรับInfoViewบล็อก:

var InfoView = Backbone.View.extend({
    initialize: function() {
        // I want to re-render on changes
        this.model.bind("change", this.render, this);

        // Render
        this.render();
    },
    render: function() {
        // Just render my template
        this.$el.html(this.template());
    }
});

การผูกเป็นส่วนสำคัญที่นี่ การผูกเข้ากับโมเดลของฉันทำให้ฉันไม่ต้องกังวลกับการโทรหาrenderตัวเอง หากรูปแบบการเปลี่ยนแปลงบล็อกนี้จะแสดงตัวเองอีกครั้งโดยไม่มีผลต่อมุมมองอื่น ๆ

สิ่งPhoneListViewนี้จะคล้ายกับParentViewคุณเพียงแค่ต้องใช้ตรรกะเพิ่มขึ้นเล็กน้อยทั้งในinitializationและrenderฟังก์ชั่นของคุณเพื่อจัดการคอลเลกชัน วิธีที่คุณจัดการกับคอลเลกชันนั้นขึ้นอยู่กับคุณ แต่อย่างน้อยคุณจะต้องฟังเหตุการณ์ของคอลเลกชันและตัดสินใจว่าคุณต้องการเรนเดอร์อย่างไร (ผนวก / ลบหรือเพียงแสดงบล็อกทั้งหมดอีกครั้ง) ฉันเป็นการส่วนตัวที่จะผนวกมุมมองใหม่และลบมุมมองเก่าออกไปไม่แสดงมุมมองทั้งหมดอีกครั้ง

PhoneViewจะเกือบจะเหมือนกันกับInfoViewเพียงการฟังการเปลี่ยนแปลงรูปแบบที่ใส่ใจเกี่ยวกับ

หวังว่านี่จะช่วยได้เล็กน้อยโปรดแจ้งให้เราทราบหากมีสิ่งที่ทำให้เกิดความสับสนหรือมีรายละเอียดไม่เพียงพอ

ฉันไม่แน่ใจว่าสิ่งนี้ตอบคำถามของคุณโดยตรงหรือไม่ แต่ฉันคิดว่ามันเกี่ยวข้อง:

http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

บริบทที่ฉันตั้งค่าบทความนี้แตกต่างกันแน่นอน แต่ฉันคิดว่าโซลูชันทั้งสองที่ฉันเสนอพร้อมกับข้อดีข้อเสียของแต่ละข้อควรทำให้คุณเคลื่อนไหวในทิศทางที่ถูกต้อง

สำหรับฉันมันไม่ได้เป็นความคิดที่เลวร้ายที่สุดในโลกที่จะแยกแยะความแตกต่างระหว่างการตั้งค่าแบบ intital และการตั้งค่ามุมมองของคุณผ่านการตั้งค่าสถานะบางอย่าง เพื่อให้การทำความสะอาดนั้นง่ายขึ้นคุณควรเพิ่มการตั้งค่าสถานะลงในมุมมองของคุณเองซึ่งควรขยายมุมมอง Backbone (ฐาน)

เช่นเดียวกับ Derick ฉันไม่แน่ใจอย่างสมบูรณ์ว่าสิ่งนี้ตอบคำถามของคุณโดยตรง แต่ฉันคิดว่าอย่างน้อยก็น่าจะพูดถึงในบริบทนี้

ดูเพิ่มเติมที่: การใช้ Eventbus ใน Backbone

เควินพีลให้คำตอบที่ดี - นี่คือเวอร์ชั่นเวอร์ชันของฉัน:

initialize : function () {

    //parent init stuff

    this.render(); //ANSWER: RENDER THE PARENT BEFORE INITIALIZING THE CHILD!!

    this.child = new Child();
},

ฉันพยายามหลีกเลี่ยงการมีเพศสัมพันธ์ระหว่างมุมมองเช่นนี้ มีสองวิธีที่ฉันมักจะทำ:

ใช้เราเตอร์

โดยทั่วไปคุณปล่อยให้ฟังก์ชันเราเตอร์ของคุณเริ่มต้นมุมมองพาเรนต์และลูก ดังนั้นมุมมองไม่มีความรู้ซึ่งกันและกัน แต่เราเตอร์จัดการกับมันทั้งหมด

ผ่าน el เดียวกันไปยังทั้งสองมุมมอง

this.parent = new Parent({el: $('.container-placeholder')});
this.child = new Child({el: $('.container-placeholder')});

ทั้งคู่มีความรู้เกี่ยวกับ DOM เดียวกันและคุณสามารถสั่งซื้อได้ตามที่คุณต้องการ

สิ่งที่ฉันทำคือให้เด็กแต่ละคนมีตัวตน (ซึ่ง Backbone ได้ทำสิ่งนั้นเพื่อคุณ: cid)

เมื่อ Container ทำการเรนเดอร์การใช้ 'cid' และ 'tagName' จะสร้างตัวแทนสำหรับเด็กทุกคนดังนั้นในเทมเพลต children จึงไม่ทราบว่าจะวางคอนเทนเนอร์ไว้ที่ใด

<tagName id='cid'></tagName>

กว่าที่คุณสามารถใช้

Container.render()
Child.render();
this.$('#'+cid).replaceWith(child.$el);
// the rapalceWith in jquery will detach the element 
// from the dom first, so we need re-delegateEvents here
child.delegateEvents();

ไม่ต้องการตัวยึดตำแหน่งที่ระบุและคอนเทนเนอร์จะสร้างตัวยึดตำแหน่งแทนโครงสร้าง DOM สำหรับเด็กเท่านั้น Cotainer และ Children ยังคงสร้างองค์ประกอบ DOM ของตัวเองและเพียงครั้งเดียว

นี่คือมิกซ์อินที่มีน้ำหนักเบาสำหรับการสร้างและการแสดงผลหน้าย่อยซึ่งฉันคิดว่าจะแก้ปัญหาทั้งหมดในชุดข้อความนี้:

https://github.com/rotundasoftware/backbone.subviews

วิธีการที่ใช้โดยปลั๊กนี้คือการสร้างและแสดงภาพย่อยหลังจากครั้งแรกที่มีการแสดงผลมุมมองหลัก จากนั้นในการแสดงผลมุมมองพาเรนต์ที่ตามมา $ .detach องค์ประกอบมุมมองย่อยให้เรนเดอร์พาเรนต์ใหม่อีกครั้งจากนั้นแทรกอิลิเมนต์มุมมองย่อยในตำแหน่งที่เหมาะสมและแสดงอีกครั้ง วิธีนี้จะนำวัตถุการดูกลับมาใช้ซ้ำในการแสดงผลในภายหลังและไม่จำเป็นต้องมอบหมายเหตุการณ์อีกครั้ง

โปรดทราบว่ากรณีของมุมมองคอลเลกชัน (ซึ่งแต่ละโมเดลในคอลเลกชันแสดงด้วยมุมมองย่อยหนึ่ง) นั้นค่อนข้างแตกต่างกันและข้อดีของการอภิปราย / การแก้ปัญหาของตัวเองฉันคิดว่า วิธีแก้ปัญหาทั่วไปที่ดีที่สุดที่ฉันรับรู้ในกรณีนี้คือCollectionView ใน MarionetteMarionette

แก้ไข: สำหรับกรณีมุมมองการรวบรวมคุณอาจต้องการตรวจสอบการใช้UI ที่มุ่งเน้นนี้ถ้าคุณต้องการการเลือกรุ่นตามคลิกและ / หรือลากและวางเพื่อจัดเรียงใหม่