javascript मौजूदा तत्वों को बनाम backbone.js को जोड़कर डीओएम में एल डालने




backbone-views (4)

आप विकल्पों में 'एल' संपत्ति के रूप में दृश्य में एक 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')
    });
});

मैं अपना पहला वास्तविक गैर-ट्यूटोरियल बैकबोन ऐप कार्यान्वित कर रहा हूं, और बैकबोन.जेएस का उपयोग करके उपयोग करने के एक पहलू के बारे में 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 टेम्पलेट्स को जेएस टेम्पलेट्स में परिवर्तित कर रहा हूं। दृश्य को एक अटैचमेंट तत्व प्रदान करने और एचटीएमएल में एंकर पॉइंट प्रदान करने की बजाय, इसे और अधिक प्राकृतिक लग रहा है, जब केवल एक दृश्य के लिए एक तत्व होने जा रहा है और यह दूर नहीं जायेगा, एक मौजूदा, खाली रैपर तत्व (अक्सर एक div या span ) का उपयोग स्वयं के रूप में करने के लिए। इस तरह मुझे दस्तावेज़ में जगह को अपने unattached el डालने के बारे में चिंता करने की ज़रूरत नहीं है, जो संभावित रूप से इस तरह दिखने वाला अंत होगा (अतिरिक्त लेयरिंग नोट करें):

<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>

तो मेरे दूसरे प्रश्न का हिस्सा मूल रूप से स्थैतिक दृश्य के लिए है, क्या पृष्ठ के एचटीएमएल से मौजूदा तत्व का उपयोग सीधे मेरे दृश्य के रूप में करने में कुछ भी गलत है? इस तरह से मैं इसे पहले ही डीओएम में सही जगह पर जानता हूं, और कॉलिंग रेंडर तुरंत पृष्ठ पर दृश्य प्रस्तुत करेगा। मैं अपने दृश्य के रचनाकार को 'एल' के रूप में पहले से ही 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>

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

धन्यवाद


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


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

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

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

जैसा कि मैंने पहले कहा था, चीजों को करने का वास्तव में कोई गलत तरीका नहीं है, बस जो काम करता है वह करें। :)

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

मज़े करो!


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

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

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





backbone-views