Javascript Backbone.js初级定制问题_Javascript_Jquery_Backbone.js

Javascript Backbone.js初级定制问题

javascript jquery backbone.js

Javascript Backbone.js初级定制问题,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我一直在尝试启动并运行我的第一个Backbone.js应用程序，在Backbone.js入门之后我已经完成了这个示例，现在我正在尝试对其进行定制，以便从我的服务器检索和读取JSON文件。我不需要能够更改或删除任何数据我已经按照以下入门设置了我的html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"

我一直在尝试启动并运行我的第一个Backbone.js应用程序，在Backbone.js入门之后

我已经完成了这个示例，现在我正在尝试对其进行定制，以便从我的服务器检索和读取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>


主干.js底漆
成绩单数据

然后，我编写了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();

var dayed=moment（new Date（））.add（-1，'days'）.format（'YYYY-MM-DD'））
var Yesterdaysdautaul=https://mihndbotblob.blob.core.windows.net/mihndbot-transcripts/finalTranscripts/dailyTranscripts/“+昨天+”.json”
//每个转录本iten的模型类
var DailyTranscriptsModel=Backbone.Model.extend({
默认值：{
类型：null，
MessageID:null，
MessageTime:null，
MessageChannel:null，
MessageSenderID:null，
MessageSenderName:null，
会话ID:null，
MessageText:null，
MessageRecipientID:null，
QuickReplyDisplayText:空，
QuickReplyPayload:null，
问题:无效,，
答:空,，
FollowUpPrompts:null
}
});
//DailyTransTipts列表终结点的集合类
var DailyTranscriptsCollection=Backbone.Collection.extend({
型号：DailyTranscriptsModel，
网址：Yesterdaysdautaul
});
//查看用于显示每个dailyTranscripts列表项的类
var DailyTranscriptsListItemView=Backbone.View.extend({
标记名：“li”，
类名：“每日成绩单”，
初始化：函数（）{
this.listenTo（this.model）
},
渲染：函数（）{
var html='MessageID:'+this.model.get（'MessageID'）；
html+='
消息时间：'+this.model.get（'MessageTime'）；
这个.$el.html（html）；
归还这个；
}
});
//用于呈现所有dailyTranscripts列表的View类
var DailyTranscriptsListView=Backbone.View.extend({
el:“#每日成绩单应用程序”，
初始化：函数（）{
this.listenTo（this.collection，'sync'，this.render）；
},
渲染：函数（）{
var$list=this.$（'ul.dailyTranscripts list'）.empty（）；
此.collection.each（函数（模型）{
var item=newdailyTranscriptsListItemView（{model:model}）；
$list.append（item.render（）.$el）；
}，这个）；
归还这个；
}
});
//创建新的列表集合、列表视图，然后获取列表数据：
var dailyTranscriptsList=新的DailyTranscriptsCollection（）；
var dailyTranscriptsView=新的dailyTranscriptsList视图（{collection:dailyTranscriptsList}）；
dailyTranscriptsList.fetch（）；

我对代码所做的主要更改（除了一些自定义）是删除primer用于创建视图的模板（我无法让它们工作），并且删除了主干CRUD元素，因为我只需要我的应用程序从服务器读取数据，而不需要更新或删除数据

我遇到的问题是，当我从服务器中提取JSON文件时，没有一个数据像预期的那样呈现在HTLM中，它只是空白

我知道当我添加

时，Backbone.js正在检索数据

到最后的

dailyTranscriptsList.fetch（）

调用我可以在浏览器控制台中看到数据：

您需要在jQuery的

这将导致您的js在DOM就绪后运行，因此主干将知道如何找到视图工作所需的元素

您还可以将

移动到页面末尾，就在

之前

// backbone.js

$(document).ready(function () {

  // all your backbone.js code here

})