Backbone.js 底漆定制问题

Question

我一直在尝试启动我的第一个 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();

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

我遇到的问题是，当我从服务器拉回 JSON 文件时，none 数据按预期在 HTLM <div> 中呈现，它是只是空白。

我知道 Backbone.js 正在检索数据，因为当我将 .then(function() {console.log(dailyTranscriptsList);}); 添加到最终的 dailyTranscriptsList.fetch() 调用时我可以在浏览器控制台中看到数据：

Answer 1

您需要将所有 backbone.js 代码包装在 jQuery 的 .ready()

中

// backbone.js

$(document).ready(function () {

  // all your backbone.js code here

})

这会导致您的 js 在 DOM 准备好后运行，因此 Backbone 将知道如何找到它需要的元素以使视图工作。

您也可以将 <script type="text/javascript" src="./backbone.js"></script> 移动到页面末尾，就在 </body>

之前

Backbone.js 底漆定制问题

Backbone.js primer customisation issues

javascript

jquery

backbone.js