Backbone.js - तत्काल मॉडलों/दृश्यों से बाहर निकलने वाले एचटीएमएल

मैंने अपने आवेदन में कोड व्यवस्थित करने के तरीके के रूप में आज backbone.js को देखना शुरू कर दिया है।Backbone.js - तत्काल मॉडलों/दृश्यों से बाहर निकलने वाले एचटीएमएल

मैं सोच रहा था (अवधारणात्मक रूप से - इसलिए स्यूडोकोड के साथ हर तरह से जवाब दें) मैं बैकबोन मॉडल (और दृश्य) बनाने के लिए अपने मौजूदा एचटीएमएल का उपयोग कैसे करूं।

मेरे द्वारा प्राप्त सभी ट्यूटोरियल में एक खाली HTML टेम्पलेट का उपयोग करने और फिर AJAX का उपयोग कर सामग्री में इंजेक्शन शामिल है। मैं यह नहीं करना चाहता।

यदि मेरे पास पुस्तकों का संग्रह है।

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My Book Collection</title> 
</head> 
<body> 
    <head> 

    </head> 
    <body> 
     <ul id="bookCollection"> 
      <li class="book" data-book-id="1"><input type="text" name="book_1_name" value="My Book A"/></li> 
      <li class="book" data-book-id="2"><input type="text" name="book_2_name" value="My Book B"/></li> 
      <li class="book" data-book-id="3"><input type="text" name="book_3_name" value="My Book C"/></li> 
      <li class="book" data-book-id="4"><input type="text" name="book_4_name" value="My Book D"/></li> 
      <li class="book" data-book-id="5"><input type="text" name="book_5_name" value="My Book E"/></li> 
     </ul> 
    </body> 
</body> 
</html>

इस स्तर मैं एक मॉडल के रूप में प्रत्येक पुस्तक के प्रबंध शुरू करना चाहते हैं, एक समारोह में जब भी पुस्तक के नाम बदल रहे हैं (बस अवधारणा के सबूत के लिए समारोह में एक चेतावनी) पर कॉल, और फिर एक यूआरएल बुला सिंक करने के लिए मेरे डेटाबेस के साथ मॉडल में परिवर्तन।

किसी को भी एक तरह से एक पृष्ठ पर मौजूदा एचटीएमएल का उपयोग करके उपरोक्त करने के लिए सही दिशा में मुझे बात कर सकते हैं?

यदि यह एक फर्क पड़ता है तो मैं अपने टेम्पलेटिंग के लिए मूंछ का उपयोग करने की योजना बना रहा हूं।

स्रोत

2011-07-21 calumbrodie

अपने प्रश्न के बारे में यदि आप उस उद्देश्य के लिए अपने HTML को बदलने की जरूरत है? यदि ऐसा है: वास्तव में नहीं। या आप जेएस चाहते हैं? –

@lazerscience - मैं सिर्फ यह जानना चाहता हूं कि एचटीएमएल को छोड़ने से डेटा बनाना संभव है (डेटा खींचने के बजाय, डेटा + टेम्पलेट का उपयोग करके एचटीएमएल बनाना और पेज में इंजेक्शन करना) - और मैं यह कैसे करूं? उपर्युक्त उदाहरण में मुझे लूप (मैं jQuery का उपयोग कर रहा हूं) बनाने और प्रत्येक पुस्तक तत्व के लिए एक दृश्य बनाने की आवश्यकता होगी? – calumbrodie

बैकबोन के विचार हमेशा एक specfic html तत्व (दृश्य की विशेषता el) से बंधे रहते हैं। आपके पास BookCollectionViewul#bookCollection और BookView से li.book तक बाध्य हो सकता है, जो आपके वर्तमान टेम्पलेट संरचना के साथ ठीक होना चाहिए।

आप मॉडल के लिए यूआरएल का उपयोग कर एक Book मॉडल को मानचित्र में देख सकते हैं। यदि मॉडल उस यूआरएल से प्राप्त किया जाता है और आपने मॉडल परिवर्तन के लिए बाध्यकारी घटना को परिभाषित किया है, तो तदनुसार दृश्य को नए मॉडल डेटा के साथ रीफ्रेश करना चाहिए। संग्रह के यूआरएल और किताबों के संग्रह के लिए भी लागू होता है।

मुझे लगता है कि रीढ़ की हड्डी पर कई अच्छे ट्यूटोरियल नहीं हैं, लेकिन http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/ या http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/ जैसे कुछ का अध्ययन करें। मान लीजिए कि अगर आप कुछ और ठोस सवालों के साथ आ सकते हैं तो यह आसान है!

स्रोत

2011-07-21 12:53:13

उत्तर के लिए धन्यवाद। जब आप कहते हैं "BookView li.book से जुड़ा हुआ है, जो आपके वर्तमान टेम्पलेट संरचना के साथ ठीक होना चाहिए"। क्या आपका मतलब पांच अलग-अलग वस्तुओं से जुड़ा हुआ है? क्या यह स्वीकार्य है? क्या इन 5 वस्तुओं को अलग से ट्रैक करने की आवश्यकता नहीं है? व्यापक प्रश्नों के लिए खेद है - मैं बस कूदने से पहले शामिल अवधारणाओं की पकड़ पाने की कोशिश कर रहा हूं। – calumbrodie

यह प्रत्येक 'li' के लिए एक अलग दृश्य उदाहरण को बांध देगा! एवे समय यह होता है कि दृश्य में परिभाषित सभी घटनाएं दृश्य के तत्वों के लिए बाध्य होंगी, इसलिए यदि कोई दृश्य फिर से प्रस्तुत किया जाता है तो सभी घटनाओं को परिभाषित किया जाना चाहिए (जो रीढ़ की हड्डी का उपयोग करने का एक बड़ा फायदा है, jQuery की लाइव जैसी कुछ चीज़ों का उपयोग करने की आवश्यकता नहीं है ज्यादातर स्थितियों में) –

आपकी मदद के लिए धन्यवाद - निकट भविष्य में अधिक बेवकूफ प्रश्न कोई संदेह नहीं – calumbrodie

मैं वास्तव में वही काम करने की कोशिश कर रहा था और बस इसके आसपास अपना रास्ता ढूंढ गया!

एक टोडो सूची उदाहरण पर निर्माण करने की कोशिश कर रहा था, जहां मेरे पास पहले से ही पृष्ठ पर कुछ टोडोज़ हैं, उन्हें अपने टोडोस संग्रह में मॉडल के रूप में लाने के लिए चाहते हैं और उन्हें उसी तरह प्रबंधित किया गया है जो तत्वों के लिए होता है एक खाली पृष्ठ

पूरे जेएस कोड को https://gist.github.com/1255736 पर अधिक जानकारी देने के लिए टिप्पणियों के साथ चिपकाया गया है।

महत्वपूर्ण हिस्सा संग्रह को तुरंत चालू करने के तरीके पर है। असल में:

आपको jQuery के माध्यम से अपने मौजूदा HTML तत्व मिलते हैं। यदि आपका मॉडल का दृश्य टैगनाम पर आधारित है: 'li', तो यह टैग है जिसे आपको यहां पुनर्प्राप्त करने के लिए आवश्यक है।
आप डेटा है कि अपने मॉडल का गठन किया वहाँ में है कि स्क्रैप और अपने मॉडल बनाने के लिए
आप एक मॉडल के लिए एक दृश्य बनाते हैं, यह मॉडल और आधार तत्व गुजर इन टैग के माध्यम से पुनरावृति।यह मेरी समस्या थी: मैं दृश्य बना रहा था और केवल बाद में इसे my_view.el = xxx के माध्यम से जोड़ने की कोशिश कर रहा था। यह काम नहीं करता है।
आप संग्रह करने के लिए अपने मॉडल जोड़ने

नोट: संग्रह आमतौर पर एक दृश्य के बाद से जुड़ा हुआ है ताकि collection.add का उपयोग कर के रूप में अच्छी तरह से देखने के लिए अद्यतन करेगा। चूंकि निर्माता को प्रारंभकर्ता में बुलाया जाता है, संग्रह अभी तक बाध्य नहीं हुआ है और आप उन्हें यहां जोड़कर अपने HTML में तत्वों को डुप्लिकेट नहीं करेंगे।

// this is the important part for initializing from html! 
khepin.Todos = Backbone.Collection.extend({ 
    model: khepin.Todo, 

    // In this function we populate the list with existing html elements 
    initialize: function() { 
     _.each(
      // get all the <li></li> todo items (the base for the todo view) 
      // and for each of them: 
      $('.todo'), 
      function(a){ 
       // Create the model 
       var todo = new khepin.Todo(); 
       // Find the todo's text 
       var task = $(a).find('span')[0]; 
       task = $(task).text(); 
       // set the model correctly 
       todo.set({ 
        task: task 
       }); 
       // create the todo view 
       var todoView = new khepin.TodoView({ 
        model: todo, 
        el: a // the el has to be set here. I first tried calling new TodoView and setting the 'el' afterwards 
        // and the view wasn't managed properly. We set the "el' to be the <li></li> we got from jQuery 
      }); 
     // Add this new model to the collection 
     this.add(todo); 
     }, 
     this 
    ); 
} 
})

आशा है कि इससे मदद मिलती है!

स्रोत

2011-10-01 07:52:27 Khepin

मुझे एक ही समस्या थी और इसे मुख्य रूप से मेरे मुख्य दृश्य (उल सूची) के निर्माता के भीतर हल किया गया - रीढ़ की हड्डी 0.9 के रूप में।

मैंने इसे अपने दिमाग में कॉफ़ीस्क्रिप्ट सिंटैक्स से रूपांतरित कर दिया है, इसलिए अगर कुछ वाक्यविन्यास त्रुटियां हैं तो कृपया नम्र रहें।

myListView = Backbone.View.extend({ 
    initialize: function() { 
     ._each(this.$el.children(), function(book, i) { 
      new Backbone.View({ 
        el: book, 
        model: this.collection.at(i) 
      }); 
     }); 
    } 
});

और इसे इस तरह बुला:

new myListView({ 
    collection: anExistingCollection, 
    el: $('#bookCollection') 
});

ऐसा नहीं है कि संग्रह 'anExistingCollection' के लिए अपने पहले से ही उत्पन्न सूची प्रविष्टियों के रूप में एक ही है जैसा कि इस उदाहरण में एक ही सूचकांक पर निर्भर करता है महत्वपूर्ण है।

(untested)

स्रोत

2012-02-16 12:19:30 acme

Backbone.js - तत्काल मॉडलों/दृश्यों से बाहर निकलने वाले एचटीएमएल

उत्तर

संबंधित मुद्दे