Question

我目前正在构建一个带有下划线和需求的主干JS页面，一切似乎都有效但我的HTML渲染的次数正确但没有数据？

请检查帖子底部的图片，它会更好地解释。

文件：

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 /视图/类别/ 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 /集合/ 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 /模型/ CatergoriesModel.js

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

模板/类别/ 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>
<% }); %>

enter image description here API数据

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

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

             }...

Answer 1

你犯了几个错误。首先，您尝试在fetch成功回调中解析您的json，而应该覆盖您的集合parse方法。

例如：

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

第二个问题是计时，你在实例化之后立即在集合视图上调用render，但此时你的fetch调用可能还没有完成。相反，您可以在fetch回调中调用视图的渲染方法。

例如

   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()
      };

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

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

此处是指向jsbin

的链接

Backbone View with Loop with Loop没有数据？

1 个答案: