我一直在尝试让我的第一个Backbone.js应用程序启动和运行，遵循Backbone.js初级here。
我已经完成了这个例子，现在我尝试根据我的目的对它进行定制，我的目的是从我的服务器上检索和读取JSON文件，我不需要能够更改或删除任何数据。
我已经按照下面的初级读本设置了我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Backbone.js Primer</title>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/underscore/underscore-min.js"></script>
<script type="text/javascript" src="./node_modules/backbone/backbone-min.js"></script>
<script type="text/javascript" src="./node_modules/moment/moment.js"></script>
<script type="text/javascript" src="./backbone.js"></script>
</head>
<body>
<div>
<h1>Transcripts Data</h1>
<div id="dailyTranscripts-app">
<ul class="dailyTranscripts-list"></ul>
</div>
</div>
</body>
</html>然后，我编写了backbone.js文件，如下所述：
var yesterday = moment (new Date()).add(-1, 'days').format('YYYY-MM-DD')
var yesterdaysDataURL = 'https://mihndbotblob.blob.core.windows.net/mihndbot-transcripts/finalTranscripts/dailyTranscripts/' + yesterday + '.json'
// Model class for each transcript iten
var DailyTranscriptsModel = Backbone.Model.extend({
defaults: {
type: null,
MessageID: null,
MessageTime: null,
MessageChannel: null,
MessageSenderID: null,
MessageSenderName: null,
ConversationID: null,
MessageText: null,
MessageRecipientID: null,
QuickReplyDisplayText: null,
QuickReplyPayload: null,
Question: null,
Answer: null,
FollowUpPrompts: null
}
});
// Collection class for the DailyTransctipts list endpoint
var DailyTranscriptsCollection = Backbone.Collection.extend({
model: DailyTranscriptsModel,
url: yesterdaysDataURL
});
// View class for displaying each dailyTranscripts list item
var DailyTranscriptsListItemView = Backbone.View.extend({
tagName: 'li',
className: 'dailyTranscripts',
initialize: function () {
this.listenTo(this.model)
},
render: function () {
var html = '<b>Message ID: </b> ' + this.model.get('MessageID');
html += '<br><b>Message Time: </b>' + this.model.get('MessageTime');
this.$el.html(html);
return this;
}
});
// View class for rendering the list of all dailyTranscripts
var DailyTranscriptsListView = Backbone.View.extend({
el: '#dailyTranscripts-app',
initialize: function () {
this.listenTo(this.collection, 'sync', this.render);
},
render: function () {
var $list = this.$('ul.dailyTranscripts-list').empty();
this.collection.each(function (model) {
var item = new DailyTranscriptsListItemView({model: model});
$list.append(item.render().$el);
}, this);
return this;
}
});
// Create a new list collection, a list view, and then fetch list data:
var dailyTranscriptsList = new DailyTranscriptsCollection();
var dailyTranscriptsView = new DailyTranscriptsListView({collection: dailyTranscriptsList });
dailyTranscriptsList.fetch();我对代码所做的主要更改（除了一些自定义）是删除了初级读本用来创建视图的模板（我无法让它们工作），我还删除了Backbone CRUD元素，因为我只需要我的应用从服务器读取数据，而不是更新或删除数据。
我遇到的问题是，当我从服务器上取回JSON文件时，没有一个数据像预期的那样在HTLM <div>中呈现，它只是空白。
我知道Backbone.js正在检索数据，因为当我将.then(function() {console.log(dailyTranscriptsList);});添加到最后的dailyTranscriptsList.fetch()调用时，我可以在浏览器控制台中看到数据：
1条答案
按热度按时间bq8i3lrv1#
您需要将所有的
backbone.js代码 Package 在jQuery的.ready()中这会导致js在DOM准备好之后运行，因此Backbone将知道如何找到视图工作所需的元素。
您也可以将
<script type="text/javascript" src="./backbone.js"></script>移动到页面末尾，正好在</body>之前