Question

我是Backbone.js的绝对初学者，目前我有两个挑战。

第一个问题涉及JSON Feed的数据输出。来自JSON提要的一些数据不会被提取，因此不会显示。当我检查浏览器网络流量时，它确认浏览器没有检索到我的应用程序输出的默认信息的整个Feed。
第二个问题是我不知道如何让Backbone应用程序在页面加载时执行，而不是在我将代码输入控制台区域时。

我的代码如下：

    <script id='topicTemplate' type='text/template'>
        <td> <%= author %>      </td> 
        <td> <%= weight %>      </td> 
        <td> <%= edit %>        </td>
        <td> <%= nid %>         </td>
        <td> <%= promoted %>    </td>
        <td> <%= status %>      </td>
        <td> <%= title %>       </td>
        <td> <%= content %>     </td>
    </script>

  <!-- =============== -->
  <!-- Javascript code -->
  <!-- =============== -->
  <script type="text/javascript">
    // your JS code goes here

      //Models
      var TopicStruct = Backbone.Model.extend({
          defaults: {
              author: 'unassigned',
              weight: '',
              edit: '',
              nid: '0',
              promoted: 'n/a',
              status: 'none-existent',
              title: 'Test Topic',
              content: 'none',
          }
      });

      var Topic = Backbone.View.extend({
          tagName: 'tr',
          className: 'topic',
          model: TopicStruct,

          template: _.template( $('#topicTemplate').html() ),

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

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

      });


      //Collections
      var Topics = Backbone.Collection.extend({
          model: TopicStruct,
          url: '/sites/backbone/coordinatorJSON.php',

          render: function(){
              console.log('Topics Render Responding!');
          }
      });

      //views
      var TopicsList = Backbone.View.extend({
          model: 'Topic',
          tagName: 'table',
          className: 'topics',
          initialize: function(){
              console.log('TopicsList:View responding!');
              this.render();
          },
          render: function(){
              //console.log(this);
              this.collection.each( function(topic){

                  eachtopic = new Topic({model:topic});
                  //console.log(eachtopic.el);
                  this.$el.append(eachtopic.el);

                  $('#data').append(this.$el);

              }, this);
          }
      });     

  </script>

JSON数据采用以下形式：

[
    {
        "author": "22",
        "weight": "8",
        "edit": "<a href=\"/node/17/edit?destination=sort-coordinator-json\">edit</a>",
        "nid": "17",
        "promoted": "",
        "status": "Active",
        "title": "Social investment tax relief",
        "Content": "<!--form-item-draggableviews--0-->"
    },
    {
        "author": "23",
        "weight": "0",
        "edit": "<a href=\"/node/19/edit?destination=sort-coordinator-json\">edit</a>",
        "nid": "19",
        "promoted": "",
        "status": "Approved",
        "title": "National Insurance: £2,000 employment allowance",
        "Content": "<!--form-item-draggableviews--1-->"
    },
    .
    .
    .
]

下图显示了我的输出：

enter image description here

Answer 1

为了让您的数据显示在pageload上，您需要确保在加载DOM后发生踢的应用。在这种情况下，应该是您的馆藏fetch。您还需要确保您的收藏集正在收听reset事件并在此时呈现。

例如在您的TopicsList视图中

 var TopicsList = Backbone.View.extend({
          tagName: 'table',
          className: 'topics',
          initialize: function(){
              console.log('TopicsList:View responding!');
             // this.render();
            this.collection.on('reset', this.render,this);
          },

然后在你的DOM准备活动中

$(function() {

 var topics = new Topics();
 var topicsView = new TopicsList({collection: topics});
 topics.fetch({reset: true});
});

以下是指向jsbin

的链接

Backbone.js渲染Collection View问题

1 个答案: