Backbone.js: वास्तविक दुनिया ऐप्स में संग्रह प्रतिपादन

Question

निराशाजनक रूप से, backbone.js ऐप्स के अधिकांश 'ट्यूटोरियल' उदाहरण एक साफ मॉडल स्लेट मानते हैं। अर्थात। जब तक कोई उपयोगकर्ता कोई आइटम नहीं जोड़ता तब तक मॉडल संग्रह प्रारंभ में खाली होते हैं। बेशक यह वास्तविक दुनिया ऐप में ऐसा नहीं है, जहां आपके पास आमतौर पर बैक एंड स्टोर से शुरू करने के लिए एक मौजूदा संग्रह होता है।

मैं जानना चाहता हूं कि लोग रीढ़ की हड्डी में मौजूदा संग्रह से कैसे निपटते हैं। विशेष रूप से:

• कैसे आप एक संग्रह प्रस्तुत करना के बाद यह fetch एड किया गया है करते हैं? संग्रह के माध्यम से फिर से शुरू करने का मामला है? क्या इसे किसी घटना से ट्रिगर किया जाना चाहिए?

• रीढ़ की हड्डी दस्तावेज़ 'बूटस्ट्रैपिंग' के बारे में बात करते हैं, जो मैं समझता हूं कि शुरुआती लोड पर उपलब्ध डेटा का उपयोग करना (यह एक एसईओ बिंदु दृश्य से भी समझ में आता है)। लेकिन यह अभ्यास में कैसे काम करता है? सर्वर सर्वर पर जेएस में डेटा डाला गया है? या जेएस डीओएम की जांच करता है?

मुझे लगता है कि यह एक खराब सवाल है, लेकिन मैं जवाबों के आधार पर इसका विस्तार करने की उम्मीद करता हूं।

संपादित

तो ऐसा लगता है कि आम सहमति जे एस की पार्टी और उस पृष्ठ पर लोड की प्रक्रिया के रूप में डेटा जोड़ने के लिए है।

इस तकनीक के साथ मुझे एक बड़ा नुकसान यह है कि जानकारी खोज इंजन मकड़ियों के लिए उपलब्ध नहीं है। उस परिप्रेक्ष्य से इसे डीओएम से निकालने के लिए बेहतर हो सकता है (हालांकि मैंने इसे किसी भी तरह से नहीं देखा है)। या हो सकता है कि HTML सर्वर पक्ष और जेएस में डेटा चिपकाएं?

Answer 1

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

my_application।js

window.MyApplication = { 
    Models: {}, 
    Collections: {}, 
    Views: {}, 
    Routers: {}, 
    init: function() { 
    // Start the data loading 
    this.someItems = new MyApplication.Collections.Items(); 
    this.someItems.fetch(); 

    // Start rendering the UI before the data is ready 
    new MyApplication.Routers.Items(this.someItems); 
    Backbone.history.start(); 
    } 
}; 

रूटर/items_router.js

MyApplication.Routers.Items = Backbone.Router.extend({ 
    routes: { 
    "" : "index" 
    }, 

    initialize: function(collection) { 
    this.collection = collection; 
    }, 

    index: function() { 
    var view = new MyApplication.Views.ItemsIndex({ collection: this.collection }); 
    $('.items').html(view.render().el); 
    } 
}); 

विचारों/आइटम/items_index.js

MyApplication.Views.ItemsIndex = Backbone.View.extend({ 
    initialize: function() { 
    _.bindAll(this, "render"); 

    // Once the collection is fetched re-render the view 
    this.collection.bind("reset", this.render); 
    }, 

    render: function() { 
    console.log(this.collection.length); 
    // Render content 
    return this; 
    } 
}); 

Answer 2

जहां तक ​​संग्रह प्रतिपादन किया जाता है, हां मैं आमतौर पर संग्रह पर पुन: प्रयास करता हूं और प्रत्येक मॉडल के लिए एक बाल दृश्य बनाता हूं। यहां एक लिंक है जो उस http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

पर सहायक हो सकता है जब आप इसे प्रस्तुत करना चाहिए? वैसे यह जवाब देने में कठिन है लेकिन मैं यह नहीं कहूंगा कि यह किसी विशेष घटना के जवाब में है। एक चीज जो मुझे पसंद है वह यह है कि हमारे पास एक मुख्य दृश्य है जो उप-दृश्य प्रस्तुत करता है जो अन्य उप दृश्य प्रस्तुत करता है। एक सम्मेलन के रूप में हम सीधे डीओएम को प्रस्तुत नहीं करते हैं, लेकिन एक बार सभी उप विचार प्रस्तुत किए जाने के बाद, हम मुख्य दृश्य को डोम में जोड़ते हैं और पूरा पृष्ठ तुरंत दिखाई देता है। यह 'अनस्टाइल सामग्री का फ्लैश' से बचाता है

बूटस्ट्रैपिंग के संबंध में मैं उन सामग्री से देखता हूं जिन्हें आप अक्सर पूछे जाने वाले प्रश्नों से देखते हैं, और यही वह है जो मैंने अभ्यास में किया है। (हालांकि मैं ग्लोबल नेम स्पेस सामान्य रूप से पर 'किताबें' डाल नहीं होगा) का उपयोग मैं ASP.Net MVC 3 तो मेरे सर्वर साइड गाया दृश्य की तरह कुछ होगा:

<script type="text/javascript"> 
    books = new BooksCollection(); 
    books.reset(@Html.ToJson(Model)); 
</script> 

आशा है कि उपयोगी है।

Answer 3

वास्तव में, मैं थोड़ी देर के लिए रीढ़ पर कुछ काम किया है , और मैंने पाया है कि बूटस्ट्रैपिंग डेटा कुछ मामलों में वास्तव में सहायक होता है, जब आप जानते हैं कि आपको उस डेटा की आवश्यकता होगी जैसे पेज लोड होता है (टी हस एक अतिरिक्त AJAX कॉल)

Symfony में कम करने, मैं इसे इस तरह से आवश्यक डेटा प्रतिपादन द्वारा कार्य करें: (

<script type="text/template" id="__user-boostrap"> 
    {% echo your data from php or render a controller in symfony or whatever server side script/framework you want %} 
    // for example in symfony2, I do: 
    {% render "myBundle:Core:getUser" %} 
</script> 

अब, इनिशियलाइज़ में) समारोह, आप डोम से सीधे इस डेटा उठा सकते हैं , और हमेशा की तरह काम कर रही शुरू: मेरे रूटर में

उदाहरण के लिए, मैं करता हूँ

myApp.Router = Backbone.Router.extend({ 
    var data = JSON.parse($('__user-bootstrap').html()); 
    var __games = new myApp.Games(); 
    __games.reset(__games.parse(data.games)); 
    var gameList = new myApp.GameListView({ collection: __games }); 
    $(this.gameView).html(gameList.$el); 
}); 

आशा इस मदद करता है ...