डीओएम

Question

में एल को सम्मिलित करने वाले मौजूदा तत्वों के लिए backbone.js विचारों को जोड़कर मैं अपना पहला वास्तविक गैर-ट्यूटोरियल बैकबोन ऐप कार्यान्वित कर रहा हूं, और बैकबोन.जेएस का उपयोग करके उपयोग करने के एक पहलू के बारे में 2-एश प्रश्न हैं जो निपटारे नहीं हैं मेरे साथ बहुत अच्छा है, जो el के लिए मौजूदा तत्व का उपयोग कर डीओएम बनाम में el को एक दृश्य प्रस्तुत करने से इंजेक्शन देता है। मुझे संदेह है कि मैं आपको कुछ "सिखाने योग्य क्षण" के साथ सब कुछ प्रदान करूंगा, और सहायता की सराहना करता हूं।

अधिकांश बैकबोन दृश्य उदाहरण मैं वेब में देखता हूं टैग नाम, आईडी और/या क्लासनाम, एक दृश्य बनाते समय और इस प्रकार एक एलओएम से अनुपयुक्त एक एल बनाता है। वे आम तौर पर कुछ इस तरह दिखाई:

App.MyView = Backbone.View.extend({ 
    tagName: 'li', 
    initialize: function() { 
    ... 
    }, 
    render: function() { 
     $(this.el).html(<render an html template>); 
     return this; 
    } 
}); 

लेकिन ट्यूटोरियल हमेशा समझा कि वे किस तरह डोम में गाया एल बढ़ाने का सुझाव देते के लिए चारों ओर नहीं मिलता है। मैंने इसे कुछ अलग तरीके से देखा है। तो, मेरा पहला सवाल यह है कि: दृश्य की रेंडर विधि को कॉल करने के लिए उचित स्थान कहां है और अपना एलओएम में डालें? (असफल रूप से एक और एक ही जगह नहीं)। मैंने देखा है कि इसे राउटर में किया गया है, दृश्य में प्रारंभ या कार्य प्रस्तुत करना, या केवल रूट स्तर दस्तावेज़ तैयार फ़ंक्शन में। ($(function())। मैं कल्पना कर सकता हूं कि इनमें से कोई भी काम है, लेकिन क्या ऐसा करने का कोई सही तरीका है?

दूसरा, मैं कुछ HTML मार्कअप/वायरफ्रेम से शुरू कर रहा हूं, और HTML भागों को बैकबोन दृश्यों के अनुरूप जेएस टेम्पलेट्स में परिवर्तित कर रहा हूं। दृश्य को एक अटैचमेंट तत्व प्रदान करने और एचटीएमएल में एंकर पॉइंट प्रदान करने की बजाय, इसे और अधिक प्राकृतिक लग रहा है, जब केवल एक दृश्य के लिए एक तत्व होने जा रहा है और यह दूर नहीं जायेगा, el के रूप में एक मौजूदा, खाली रैपर तत्व (अक्सर div या span) का उपयोग करने के लिए। इस तरह मैं अपने स्वाधीन एल, जो संभवतः (अतिरिक्त लेयरिंग ध्यान दें) इस तरह लग रही हो जाएंगे सम्मिलित करने के लिए दस्तावेज़ में जगह खोजने के बारे में चिंता करने की ज़रूरत नहीं है:

<div id="insert_the_el_in_here"> <!-- this is all that's in the original HTML doc --> 
    <div id="the_el"> <!-- i used to be a backbone generated, unattached el but have been rendered and inserted --> 
     <!-- we're finally getting to some useful stuff in here --> 
    </div> 
</div> 

तो मेरी दूसरा सवाल का हिस्सा मूल रूप से स्थैतिक दृश्य के लिए, क्या पृष्ठ के एचटीएमएल से मौजूदा तत्व का उपयोग करने में कुछ भी गलत है, मेरे दृश्य के el? इस तरह से मैं इसे पहले ही डीओएम में सही जगह पर जानता हूं, और कॉलिंग रेंडर तुरंत पृष्ठ पर दृश्य प्रस्तुत करेगा। मैं अपने दृश्य के रचनाकार को 'एल' के रूप में पहले से ही exixting तत्व गुजरकर यह स्वीकार करूँगा। इस तरह, मुझे ऐसा लगता है, मुझे इसे डोम में चिपकाने के बारे में चिंता करने की ज़रूरत नहीं है (प्रश्न 1 प्रकार का मूत बनाना), और रेंडरिंग कॉलिंग तुरंत डीओएम अपडेट करेगा। जैसे

<form> 
    <div someOtherStuff> 
    </div> 
    <span id="myView"> 
    </span> 
</form> 

<script type="text/template" id = "myViewContents"> . . . </script> 

<script type="application/javascript"> 
window.MyView = Backbone.View.extend({ 
    initialize: function() { 
      this.template = _.template($('#myViewContents').html()); 
      this.render(); 
    }, 
    render: function() { 
      $(this.el).html(this.template()); 
      return this; 
    } 
}); 
$(function() { 
    window.myView = new MyView({ el: $('#myView').get(0) }); 
}); 
</script> 

क्या यह पृष्ठ पर स्थिर दृश्यों के लिए ऐसा करने का एक अच्छा तरीका है? यानी, इन विचारों में से केवल एक ही है, और यह किसी भी परिस्थिति में नहीं चलेगा। या कोई बेहतर तरीका है? मुझे एहसास है कि चीजों का उपयोग करने के तरीकों के आधार पर चीजों को करने के विभिन्न तरीके हो सकते हैं (यानी, राउटर में, मूल दृश्य में, पेज लोड इत्यादि पर)), लेकिन मैं अभी प्रारंभिक पृष्ठ लोड को देख रहा हूं उदाहरण।

धन्यवाद

Answer 1

इसमें एक मौजूदा डोम नोड के लिए एक दृश्य के लिए संलग्न के विचार के साथ कुछ भी गलत नहीं है।

आप अपने विचार पर एक संपत्ति के रूप में भी डाल सकते हैं।

window.MyView = Backbone.View.extend({ 
    el: '#myView', 
    initialize: function() { 
      this.template = _.template($('#myViewContents').html()); 
      this.render(); 
    }, 
    render: function() { 
      this.$el.html(this.template()); // this.$el is a jQuery wrapped el var 
      return this; 
    } 
}); 
$(function() { 
    window.myView = new MyView(); 
}); 

मैं क्या सलाह देता हूं, क्या काम करता है ... बैकबोन की सुंदरता यह है कि यह लचीला है और आपकी आवश्यकताओं को पूरा करेगा।

जहां तक ​​आम पैटर्न का संबंध है, आम तौर पर मुझे अपने विचारों का ट्रैक रखने के लिए मुख्य दृश्य मिलता है, फिर शायद एक सूची दृश्य और व्यक्तिगत आइटम दृश्य।

एक अन्य आम पैटर्न जहाँ तक प्रारंभ संबंध है ...

var App = (function ($, Backbone, global) { 
    var init = function() { 
     global.myView = new myView(); 
    }; 

    return { 
     init: init 
    }; 
}(jQuery, Backbone, window)); 

$(function() { 
    App.init(); 
}); 

जैसा कि मैंने कहा, हालांकि, वहाँ वास्तव में काम करने के लिए कोई गलत तरीका है से पहले, बस सामान का प्रबंधन करने के अनुप्रयोग वस्तु के कुछ प्रकार है क्या काम करता है :)

अगर आपको और मदद की ज़रूरत है तो ट्विटर पर मुझे मारने के लिए स्वतंत्र महसूस करें, @derickbailey को भी देखें, वह एक बीबी गुरु है।

मज़े करो!

Answer 2

आप विकल्पों में 'एल' संपत्ति के रूप में दृश्य में एक HTML डोम एलिमेंट ऑब्जेक्ट भी भेज सकते हैं।

window.MyView = Backbone.View.extend({ 
    initialize: function() { 
      this.template = _.template($('#myViewContents').html()); 
      this.render(); 
    }, 
    render: function() { 
      this.$el.html(this.template()); // this.$el is a jQuery wrapped el var 
      return this; 
    } 
}); 
$(function() { 
    window.myView = new MyView({ 
     el: document.getElementById('myView') 
    }); 
}); 

Answer 3

उपयोग प्रतिनिधि घटनाओं विधि:

initialize: function() { 
    this.delegateEvents(); 
} 

को समझने के लिए क्यों: http://backbonejs.org/docs/backbone.html#section-138 के पास "सेट कॉलबैक, जहाँ"

Answer 4

भी इन दिनों आप setElement youse कर सकते हैं की तरह लग रहा।