骨幹 - json數據不在瀏覽器中顯示，但在控制檯中呈現

我能夠在控制檯中看到json數據，但不顯示在html中。我不確定在瀏覽器中進行渲染必須做什麼修改。這是我的代碼。骨幹 - json數據不在瀏覽器中顯示，但在控制檯中呈現

Model.js

var agent = Backbone.Model.extend({ 

}); 

var agentList = Backbone.Collection.extend({ 
    model: agent, 
    url: 'data/agents.json', 
});

View.js

var agentListView = Backbone.View.extend({ 
    el: '.container', 

    initialize: function() { 
    this.template = _.template(tpl.get('agentList')); 
    }, 

    render: function() {  
    var agents = new agentList(); 
    agents.fetch({ 
     success: function(agents) { 
     console.log(agents.toJSON()); 
     } 
    }); 
    this.$el.html(this.template({ AgentsList: agents.toJSON()})) 
    }, 
});

HTML

<% _.each(AgentsList, function(item) { %>   
    <tr> 
    <td>data</td> 
    <td><%= item.name%></td> 
    <td><%= item.gender%></td> 
    <td><%= item.birthYear%></td> 
    <td><%= item.skills%></td> 
    </tr>   
    <% }); %>

來源

2014-01-21 trl

的問題是，你不呈現回調的觀點，因此，你不會有任何顯示。

此外，如果您想尊重MVC原則，那麼獲取渲染函數內的代理列表絕對不是要做的事。你應該有這樣的事情：

var agentCol = new AgentList(); 
var agentView = new AgentListView({collection: agentCol}); 

agentCol.fetch({ 
    success: function() { 
    agentView.render(); 
    } 
});

和你AgentListView應該像

var AgentListView = Backbone.View.extend({ 
    el: '.container', 

    initialize: function() { 
    this.template = _.template(tpl.get('agentList')); 
    }, 

    render: function() { 
    this.$el.html(this.template({ agents: this.collection.toJSON()})); 
    }, 
});

（我冒昧地重新命名一些變量來匹配命名約定）

來源

2014-01-21 11:57:54

感謝您的迴應。我試過這個，但結果相同。瀏覽器中沒有顯示數據 – trl

您可以提供更多的細節嗎？任何錯誤在控制檯中嗎？是否檢查AJAX響應是否正確？您是否放了幾個斷點來檢查_if_ render（）是否被稱爲_after_ fetch（）？ –

WoW！太棒了..非常感謝Emmanuel，它的工作原理！我犯的錯是，而不是集合我把收集名稱（代理 - 在我的情況）。 – trl

它也許是因爲時候$el更新代碼運行agents集合尚未加載（獲取）。

也許您可以使用下面的代碼更新您的渲染方法，以便$el只有在從服務器返回集合提取時纔會更新。

render: function() { 
    var $this = this; 
    var agents = new agentList(); 
    agents.fetch({ 
    success: function(agents) { 
     console.log(agents.toJSON()); 
     $this.$el.html($this.template({ AgentsList: agents.toJSON() })); 
    } 
    }); 
}

或者你可以聽的時候觸發，每當有數據從遠程數據源獲取集合事件（reset也許）一個選擇 - 在這種情況下JSON文件。

在這種情況下，視圖代碼可能是，

var agentListView = Backbone.View.extend({ 
    el: '.container', 

    initialize: function() { 
    this.template = _.template(tpl.get('agentList')); 
    this.collection = new agentList(); 
    this.listenTo(this.collection, "reset", this.addAgentsToDom); 
    }, 

    render: function() {  
    this.collection.fetch({ 
     success: function(agents) { 
     console.log(agents.toJSON()); 
     } 
    }); 
    }, 

    addAgentsToDom: function(collection, options) { // please name the method whatever you want :) 
    this.$el.html(this.template({ AgentsList: this.collection.toJSON() })); 
    } 
});

來源

2014-01-21 11:47:26 Cyclone

感謝您的答覆。我試過兩種解決方案。第一個在控制檯中顯示下面的錯誤，「Uncaught TypeError：Object [object global] has no method'template'」。第二個，沒有錯誤，但數據沒有加載。請幫我解決這個問題.. – trl

再次，這個錯誤。「Uncaught ReferenceError：$ this is not defined」。 – trl

實際上，在第一種方法中，我們只是將視圖引用'this'存儲到'$ this'中以用於回調，因爲在成功回調中，'this'不引用視圖。理想情況下，它應該工作，不知道爲什麼它不工作:(在第二種方法中，你可以請一個調試器或console.log在'addAgentsToDom'方法中，看看'this.collection'的值是什麼？ – Cyclone

骨幹 - json數據不在瀏覽器中顯示，但在控制檯中呈現

回答

相關問題