骨幹抓取json文件中的特定對象，而不是渲染

Question

好吧，我會稍微瘋狂地嘗試在2個獨立的視圖/集合中顯示來自json文件的數據。

我會在這裏粘貼我的整個代碼，並嘗試解釋我現在在哪裏，以及我需要做什麼。 它可能是一個非常小的東西，我只需要做，以便它的工作，但我不能看到它..

這是一個屏幕截圖我的網頁看起來像現在，因爲你可以看到數據是被加載，我只是不能把它插入正確的意見..

在我的集合類我稱之爲解析：

parse:function(response, options) { 
    return options.parseField ? response[options.parseField] : response; 
}, 

我叫同步：（不知道它需要在所有）

sync: function(method, model, options) { 
options.contentType = "application/json"; 
options.cache = false; 
options.dataType = "json"; 
return Backbone.sync(method, model, options); 
}, 

然後在底部附近，我創建了2個新的收藏和使用抓取來獲得特定的JSON數據，我需要爲每個集合，像這樣：

var links = new App.Collections.Links(); 
links.fetch({ 
    parseField: 'links_1', 
    success: function() { 
    console.log(links.toJSON()); 
      return links.toJSON(); 
    } 
}); 

var links2 = new App.Collections.Links(); 
links2.fetch({ 
    parseField: 'links_2', 
    success: function() { 
    console.log(links2.toJSON()); 
      return links2.toJSON(); 
    } 
}); 

我做的console.log並且可以看到我JSON數據正在加載就好，但它沒有得到渲染？

我在做什麼錯在這裏..

進行調試和理解的緣故，我已經包含下面我的整個js文件。

(function() { 

// Helper functions 

// Defining namespacing rules 
window.App = { 
    Models: {}, 
    Collections: {}, 
    Views: {} 
}; 

// Setting global template function, for simpel declaration later on by setting template('name'); for the built in template function. 
window.template = function(id) { 
    return _.template($('.' + id).html()); 
}; 


// Capitalize first letter in a link by adding .capitalize(); to the string. 
String.prototype.capitalize = function() { 
    return this.charAt(0).toUpperCase() + this.slice(1); 
}; 

// Extending Backbone 

//Modellen 
App.Models.Link = Backbone.Model.extend({ 
    defaults: { 
     navn : 'i haz a name!', 
     link : 'http://www.lolcats.com/', 
     counter : 0 
    } 
}); 


//Collection 
App.Collections.Links = Backbone.Collection.extend({ 

    model: App.Models.Link, 
    url: 'data1.json', 

    parse:function(response, options) { 
     return options.parseField ? response[options.parseField] : response; 
    }, 

    sync: function(method, model, options) { 
     options.contentType = "application/json"; 
     options.cache = false; 
     options.dataType = "json"; 
     return Backbone.sync(method, model, options); 
    }, 

    // Sort the models 'highest first' 
    comparator: function(link) { 
    return -link.get('counter'); 
    }  
}); 


//Singel view 
App.Views.LinkView = Backbone.View.extend({ 
    tagnavn: 'li', 

    template: template('Links'), 

    initialize: function() { 
     this.model.on('change', this.render, this); 
     this.model.on('destroy', this.remove, this); 
    }, 

    events: { 
    'click .edit' : 'retLink', 
    'click .delete' : 'destroy', 
    'click .LinkUrl' : 'addCounter' 
    }, 

    retLink: function() { 
     var newLinkNavn = prompt('What should the new name be?', this.model.get('navn')); 

     if (!newLinkNavn) return; 

     newLinkNavn = newLinkNavn.capitalize(); 
     this.model.set('navn', newLinkNavn); 


     var newLinkUrl = prompt('What should the new url be?', this.model.get('link')); 
     if (!newLinkUrl) return; 
     this.model.set('link', newLinkUrl); 
    },  

    destroy: function() { 
     this.model.destroy(); 

    }, 

    // Increment the counter then user clicks it 
    addCounter: function(e) { 
     e.preventDefault(); 
     var newCounter = this.model.get('counter'); 
     this.model.set('counter', newCounter + 1); 
    }, 

    remove: function() { 
     this.$el.remove(); 
    }, 

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

//Collection View 
App.Views.LinksView = Backbone.View.extend({ 
    tagName: 'ul', 
    className: 'liste', 

    initialize: function() { 
     _.bindAll(this); 
     this.collection.on('add', this.addOne, this); 
     this.collection.on('reset', this.render); 

     // Render view when a user has changed a model   
     this.collection.bind('change', this.render, this); 

     $('.navnClass').focus(); 
     this.load(); 
     this.render(); 

    }, 

    load: function() { 
     this.collection.fetch({ 
      add: true, 
      success: this.loadCompleteHandler, 
      error: this.errorHandler 
     });  
    }, 

    loadCompleteHandler : function(){ 
     this.render(); 
    }, 

    errorHandler : function(){ 
     throw "Error loading JSON file"; 
    }, 

    render: function() { 
     // Empty the UL before populating it with the new models and sorting it. 
     this.$el.empty(); 
     this.collection.sort(); 

     this.collection.each(this.addOne, this); 
     return this; 
    }, 

    addOne: function(link) { 
     var linkView = new App.Views.LinkView({ model: link }); 
     this.$el.append(linkView.render().el); 
    } 
}); 

// Create link view 
App.Views.AddLink = Backbone.View.extend({ 
    el: '#addLink', 

    events: { 
     'submit' : 'submit' 
    }, 

    submit: function(e) { 
     e.preventDefault(); 
     var linkNavn = $(e.currentTarget).find('.navnClass').val(), 
      linkNum = $(e.currentTarget).find('.linkClass').val(); 



     // Tildel link navn en værdi, hvis det er tomt 
     if (! $.trim(linkNavn)) { 
       linkNavn = 'I haz a name!'; 
     } 

     // Tildel link url en værdi, hvis det er tomt  
     if(! $.trim(linkNum)) { 
       linkNum = 'http://www.lolcats.com/'; 
     } 

     // Tilføj http:// foran værdi, hvis den ikke indeholder det i forvejen. 
     if(linkNum.indexOf("http://") == -1) { 
      addedValue = 'http://', 
      linkNum = addedValue + linkNum; 
     } 

     // nulstil og sæt fokus på link navn feltet. 
     $(e.currentTarget).find('.navnClass').val('').focus(); 
     $(e.currentTarget).find('.linkClass').val(''); 
     this.collection.add({ navn:linkNavn, link: linkNum }); 
    } 

}); 


// new links collection 
// populate collection from external JSON file 
// change navn to match the link heading 

var links = new App.Collections.Links(); 
links.fetch({ 
    parseField: 'links_1', 
    success: function() { 
    console.log(links.toJSON()); 
      return links.toJSON(); 
    } 
}); 

var links2 = new App.Collections.Links(); 
links2.fetch({ 
    parseField: 'links_2', 
    success: function() { 
    console.log(links2.toJSON()); 
      return links2.toJSON(); 
    } 
}); 


// new collection view (add) 
var addLinkView = new App.Views.AddLink({ collection: links }); 

// new collection view 
var linksView = new App.Views.LinksView({ collection: links }); 
$('.links').html(linksView.el); 

// new collection view 
var linksView2 = new App.Views.LinksView({ collection: links2 }); 
$('.links2').html(linksView2.el); 


})(); 

Answer 1

你能試試這個：

var links2 = new App.Collections.Links(); 
links2.on("reset", function(collection){ 
    console.log("reset event", collection); 
} 
links2.fetch({ 
    parseField: 'links_2', 
    wait:true, #wait for the server to respond 
    success: function (collection, response) { 
    console.log(collection, response); 
    } 
}); 

在成功調用的返回並不做任何事情（它會返回到$阿賈克斯對象）。我添加了一個等待，因爲如果它通過了客戶端驗證（您沒有，所以它總是會首先調用成功），它會立即調用successcall。

你說它沒有渲染任何東西。但是爲了渲染你需要的視圖。我在代碼中看不到視圖。

這裏的視圖的一個簡單的例子：

var Link = new Backbone.View.extends({ 
    el: $('body'), 
    initialize: function(){ 
     this.listenTo(this.collection, 'reset', this.render, this) 
    }, 
    render: function(){ 
    this.$el.empty(); 
    this.collection.each(function(item){ 
     this.$el.append(item.get('id') + '<br />'); 
    }); 

    } 
}) 
var view = new Link({collection: links2});