Backbone 查看循环渲染没有数据？

Question

我目前正在构建一个带有下划线和 require 的 backbone JS 页面，一切似乎都正常，但我的 HTML 得到了正确的渲染次数但没有数据？

请查看post底部的图片，它会更好地解释它。

文件：

js/route.js（加载主页内容正常，catergorieList 是我要在主页上呈现的内容）

define([
      'jquery',
      'underscore',
      'backbone',
      'views/home/HomeView',
      'views/categories/CategoriesView',
    ], function($, _, Backbone, HomeView, CategoriesView) {
      var AppRouter = Backbone.Router.extend({
        routes: {
          '*actions': 'defaultAction'
        }
      });
      var initialize = function(){

        var app_router = new AppRouter;
        app_router.on('route:defaultAction', function (actions) 
        {
            var categoriesList = new CategoriesView();
            categoriesList.render();

            var homeView = new HomeView();
            homeView.render();
        });

        Backbone.history.start();
      };
      return {
        initialize: initialize
      };
});

js/views/categories/CategoriesView.js

define([
      'jquery',
      'underscore',
      'backbone',
      'models/CatergoriesModel',
      'collections/CategoriesCollection',
      'text!templates/categories/categoriestemplate.html'
    ], function($, _, Backbone, catModel, catCollection, catTemplate){

      var Categories = Backbone.View.extend({
        initialize:function() {
            _.bindAll(this, 'render');
            this.collection = new catCollection([]);
            this.collection.bind('reset', this.render)
            this.collection.fetch();
            this.render();
        },

        render: function(){
          var data = {
            categories: this.collection.models
          };
          var compiledTemplate = _.template( catTemplate, data );
          $("#categoriesList").append(compiledTemplate);
        }

      });

      return Categories;
    });

js/collections/CategoriesCollection.js

define([
    'underscore',
    'backbone',
    'models/CatergoriesModel'
], function(_, Backbone, CatergoriesModel) {

    var CatergoriesCollection = Backbone.Collection.extend({

        model: CatergoriesModel,

        initialize: function() {
            this.fetch({
                success: this.fetchSuccess,
                error: this.fetchError
            });
        },

        url: function() {
            return 'api/categories.json';
        },

        fetchSuccess: function(collection, response) {
            return response._embedded.categories;
        },

        fetchError: function(collection, response) {
            throw new Error("Books fetch error");
        }

    });
    return CatergoriesCollection;
});

js/models/CatergoriesModel.js

define([
    'underscore',
    'backbone',
], function(_, Backbone) {
    var CatergoriesModel = Backbone.Model.extend({});
    return CatergoriesModel;
});

templates/categories/categoriestemplate.html

<% _.each(categories, function(category) { %> 
    <li data-catid="<%= category.id %>">
        <a href="#category/<%= category.id %>">
            <span class="fa fa-angle-double-right text-primary"></span><%= category.name %>
        </a>
    </li>
<% }); %>

API数据

     "_embedded":{
          "categories":[
             {
                "id":1342,
                "name":"Engineers",

             {
                "id":1344,
                "name":"Squash Courts",

             }...

Answer 1

您犯了几个错误。首先，您尝试在 fetch success callback, you should instead be overriding your collections parse 方法中为此解析 json。

例如：

  parse: function (response) {
      return response._embedded.categories;
    }

第二个问题是时间问题，您在实例化后立即在集合视图上调用渲染，但此时您的获取调用可能尚未完成。相反，您可以在获取回调中调用视图的渲染方法。

例如

   initialize:function() {
            _.bindAll(this, 'render');
            var self = this;
            this.collection = new CatergoriesCollection();
            this.collection.fetch({
              success: function () {
                 self.render();
              }
             });
     },

最后，您没有正确创建数据对象或将其正确传递给模板。

要从您的模型中获取数据，您可以使用集合 toJSON 方法

  var data = {
        categories: this.collection.toJSON()
      };

然后将其传递给 compiled template（从 underscore 1.7.0 开始，您无法再在编译模板时传递数据）。

$("#categoriesList").append(compiledTemplate(data));

这里是 link 到 jsbin

Backbone 查看循环渲染没有数据？

Backbone View Render with Loop no data?

javascript

requirejs

backbone.js

underscore.js