बाहरी जेसन

Question

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

 var Game = Backbone.Model.extend({ 
      defaults: { 
       name: 'John Doe', 
       age: 30, 
       occupation: 'worker' 
      } 
     }); 


     var GameCollection = Backbone.Collection.extend({ 
      model: Game, 
      url: 'path/to/json', 

      parse: function(response) { 
       return response; 
      } 
     }); 

     var GamesView = Backbone.View.extend({ 
      tagName: 'ul', 

      render: function() { 
       //filter through all items in a collection 
       this.collection.each(function(game){ 
        var gameView = new GameView({model: game}); 
        this.$el.append(gameView.render().el); 
       }, this) 

       return this; 
      } 
     }); 

     var GameView = Backbone.View.extend({ 
      tagName: 'li', 

      template: _.template($('#gameTemplate').html()), 

      render: function() { 
       this.$el.html(this.template(this.model.toJSON())); 
       return this; 
      } 
     }); 

     var gameCollection = new GameCollection([ 
      { 
       name: 'John Doe', 
       age: 30, 
       occupation: 'worker' 
      }, 
      { 
       name: 'John Doe', 
       age: 30, 
       occupation: 'worker' 
      }, 
      { 
       name: 'John Doe', 
       age: 30, 
       occupation: 'worker' 
      } 
     ]); 

     var gamesView = new GamesView({collection: gameCollection}); 

     $(document.body).append(gamesView.render().el); 

Answer 1

यह बैकबोन के बारे में प्यार करने के लिए कई चीजों में से एक है। मुझे नहीं पता कि आप अपने बैकएंड के लिए क्या उपयोग कर रहे हैं, लेकिन आप बताते हैं कि आपके सर्वर पर एक जेसन फ़ाइल है, उम्मीद है कि आपके संग्रह में होने वाले मॉडल से भरा एक जेएसएस फ़ाइल। और अब यहां जादू कोड है (कृपया ड्रमोल ..):

var GameCollection = Backbone.Collection.extend({ 
    model: Game, 
    url: 'path/to/json/on/external/server', 
}); 

var gameCollection = new GameCollection(); 
gameCollection.fetch(); 

इसके लिए बहुत कुछ नहीं, है ना? बेशक ऐसे कई विकल्प हैं जिन्हें आप fetch में जोड़ या बदल सकते हैं, इसलिए यहां दस्तावेज़ देखें: http://backbonejs.org/#Collection-fetch। रीढ़ का उपयोग करता jQuery.ajax() डिफ़ॉल्ट होना है, इसलिए सभी विकल्पों को देखने के लिए यहां डॉक्स की जाँच: http://api.jquery.com/jQuery.ajax/

आप जब तक सर्वर पर अपने मॉडल अपने रीढ़ मॉडल से मेल नहीं खाते अपने संग्रह में कस्टम पार्स की जरूरत नहीं होनी चाहिए।

इन बातों को जानें: fetch अतुल्यकालिक है। सर्वर से बात करने में समय लगता है, और आपका बाकी जावास्क्रिप्ट आगे बढ़ेगा और पूरा हो जाएगा। आपको शायद success विकल्प पर कॉलबैक फ़ंक्शन को कम से कम जोड़ने की आवश्यकता होगी, जिसे fetch समाप्त होने पर कहा जाएगा, और कुछ गलत होने पर error पर कुछ भी जोड़ना अच्छा होता है। आप क्वेरी स्ट्रिंग के रूप में डेटा जोड़ सकते हैं ताकि आपका बैकएंड data विकल्प का उपयोग कर इसका उपयोग कर सके, डेटा को ऑब्जेक्ट होना चाहिए। यहाँ एक उदाहरण है:

gameCollection.fetch({ 
    data: {collection_id: 25}, 
    success: function(){ 
    renderCollection(); // some callback to do stuff with the collection you made 
    }, 
    error: function(){ 
    alert("Oh noes! Something went wrong!") 
    } 
}); 

fetch JSON के रूप में डेटा प्राप्त करना चाहिए, ताकि आपके url या तो अनन्य वापसी JSON या एक AJAX अनुरोध का पता लगा और JSON के साथ यह करने के लिए प्रतिक्रिया करने के लिए स्थापित किया जाना चाहिए।

Answer 2

सबसे पहले आपको इसे सर्वर से लाने की आवश्यकता है क्योंकि RustyToms ने कहा था। और दूसरा विचार यह है कि सर्वर से एकत्र किए गए डेटा के बाद संग्रह दृश्य को फिर से प्रस्तुत करने के लिए मजबूर करना, जैसा कि muistooshort ने टिप्पणी की थी।

यदि आप fetch या sync में हेरफेर करते हैं तो आपको ऐप में एक से अधिक संग्रह होने पर कई बार ऐसा करने की आवश्यकता होगी।

इस तरह करने से कठपुतली के साथ देशी है, लेकिन सादे रीढ़ में आप कठपुतली के CollectionView की विधि नकल करते हैं और क्या कर सकते हैं इस तरह के:

//For the collection view 
var GamesView = Backbone.View.extend({ 
    initialize: function({ 
    this.listenTo(this.collection, 'reset', this.render, this); 
    }); 
    // Others 
}); 

तब, जब संग्रह डेटा सर्वर से लाना, संग्रह एक reset घटना को ट्रिगर किया जाएगा , संग्रह दृश्य ने इस घटना को देखा और खुद को फिर से प्रस्तुत किया।

एक से अधिक संग्रहों के लिए, आप कोड को मूल ऑब्जेक्ट में ऐप में निकाल सकते हैं और उस से प्राप्त कर सकते हैं।

var App.CollectionView = Backbone.View.extent({ 
    initialize: //code as above 
}); 

var GamesView = App.CollectionView.extend({ 
    //Your code without initialize 
}); 

Answer 3

मुझे पता है कि इस बिंदु पर यह थोड़ा पुराना है, लेकिन इस पर फंस गए किसी और के लिए जवाब देना चाहता था।

कोड ट्यूटोरियल यहाँ पाया से आते हैं लगता है: http://codebeerstartups.com/2012/12/a-complete-guide-for-learning-backbone-js/

मैं भी है कि ट्यूटोरियल में पाया डेमो एप्लिकेशन सोद्देश्य और मुसीबत बाहरी डेटा की प्रतिपादन किया था।

पहली बात यह है कि डेटा को स्वयं को वैध JSON में परिवर्तित करने की आवश्यकता है या अन्यथा आपको .parse() त्रुटि मिल जाएगी।

SyntaxError: JSON.parse: expected property name or '}' at line 3 column 9 of the JSON data 

या

error: SyntaxError: Unexpected token n 

आपके डेटा स्रोत फ़ाइल में वस्तु गुण उद्धरण से घिरा हो की जरूरत है। यह कुछ इस तरह दिखना चाहिए:

[ 
    { 
    "name": "John Doe", 
    "age": 30, 
    "occupation": "worker" 
    }, 
    { 
    "name": "John Doe", 
    "age": 30, 
    "occupation": "worker" 
    }, 
    { 
    "name": "John Doe", 
    "age": 30, 
    "occupation": "worker" 
    } 
] 

दूसरे, एक बार यह स्पष्ट बाहरी डेटा लोड हो रहा है है, हम इसे प्रस्तुत करने के लिए प्राप्त करने की आवश्यकता। मैंने render() कमांड को gameCollection.fetch() के सफल फ़ंक्शन में ले जाकर इसे (शायद अनुचित रूप से) हल किया।

gameCollection.fetch({ 
    success: function(collection, response, options) { 
    console.log('Success!! Yay!!'); 
    $(document.body).append(gamesView.render().el); 
    }, 
    error: function(collection, response, options) { 
    console.log('Oh, no!'); 
    // Display some errors that might be useful 
    console.error('gameCollection.fetch error: ', options.errorThrown); 
    } 
}); 

वहाँ निश्चित रूप से बेहतर तरीके यह पूरा करने के हैं, लेकिन इस विधि सीधे कोड कुछ ऐसा है जो बाहरी डेटा के साथ काम करता में ट्यूटोरियल में सीखा बदल देता है।