Question

我正在尝试获取一个简单的html页面，以在html页面上显示检索到的集合数据。没有错误被抛出，所以我无法分辨我做错了什么。

正在正确创建模型，集合和视图，因为我可以在控制台中看到它们从API中检索到的数据，但页面上没有显示任何内容。任何帮助将不胜感激。

模型

Department = Backbone.Model.extend({
  idAttribute: "dept_id",
  urlRoot: appRouteUrl + '/api/v1/departments',
  defaults: {
    dept_code: '',
    dept_desc: ''
  }
});

集合

DepartmentCollection = Backbone.Collection.extend({
  url: appRouteUrl + '/api/v1/departments',
  model: Department
});

查看

var DepartmentListView = Backbone.View.extend({
  template: "#department-list-template",
  tagName: "ul",
  render: function() {
    var results = [];
    var compiledTemplate = _.template(this.template);
    this.collection.each(function(department) {
      console.log(department);
      var html = compiledTemplate(department.toJSON());
      results.push(html);
    });
    this.$el.html(results);
    return this;
  }
});

索引

<!DOCTYPE html>
<html>

<head>
  <title>AppName</title>
</head>

<body>
  <div class="departments">
    <script type="text/template" id="department-list-template">
      <span><%= dept_desc %></span>
    </script>
  </div>
  <script>
    var departments = new DepartmentCollection();
    departments.fetch();

    var departmentList = new DepartmentListView({
      collection: departments
    });

    $('.departments').html(departmentList.render().$el);
    departmentList.render();
  </script>
</body>

</html>

Answer 1

在ajax调用完成之前，您正在调用渲染。只需在fetch完成时使用deferred和call render。

尝试以这种方式更改HTML

<!DOCTYPE html>
<html>
<head>
    <title>AppName</title>

</head>
<body>
<script type="text/template" id="department-list-template">
    <li><%= dept_desc %></li>
</script>


<div class="departments">

</div>
<script type="text/javascript">

    var departments = new DepartmentCollection();

  var departmentList = new DepartmentListView({
    collection: departments
  });
  $.when(departments.fetch()).then(function () {
     $('.departments').html(departmentList.render().$el);
  });

</script>
</body>
</html>

和视图

var DepartmentListView = Backbone.View.extend({
        template: _.template($('#department-list-template').html()),
        tagName: "ul",


        render: function () {
            var results = [];

            var self = this;
            this.collection.each(function (department) {
                console.log(department);
                var html = self.template(department.toJSON());
                results.push(html);
            });

            this.$el.html(results);

            return this;
        }

    });

Answer 2

下划线模板函数接受一个html字符串，但你给它一个id字符串。试试

var DepartmentListView = Backbone.View.extend({
  template: _.template($('#department-list-template').html()),


  tagName: "ul",

  render: function(){
    var results = [];

    this.collection.each(function(department){
    var html = this.template(department.toJSON());
    results.push(html);
    });

    this.$el.html(results);

    return this;
  }

});

编辑：使用正确的上下文

render: function(){
    var results = [];
    var self = this;
    this.collection.each(function(department){
    var html = self.template(department.toJSON());
    results.push(html);
    });

    this.$el.html(results);

    return this;
  }

Answer 3

由于您没有项目视图，我认为最好迭代集合视图的模板。在集合获取方法成功后，请确保创建视图实例/调用它的渲染。

此外，您不应该在可以删除的元素中添加模板。

＆＃13;

Department = Backbone.Model.extend({
  idAttribute: "dept_id",
  defaults: {
    dept_code: '',
    dept_desc: ''
  }
});

DepartmentCollection = Backbone.Collection.extend({
  model: Department
});

var DepartmentListView = Backbone.View.extend({
  template: _.template($('#department-list-template').html()),
  tagName: "ul",
  render: function() {
    this.$el.html(this.template({
      departments: this.collection.toJSON()
    }));
    return this;
  }
});
var departments = new DepartmentCollection([{
  dept_id: 1,
  dept_code: 'test1',
  dept_desc: 'test1'
}, {
  dept_id: 2,
  dept_code: 'test2',
  dept_desc: 'test2'
}]);

/*
departments.fetch({
  success: function(){
    // render the view here
  }
});
*/

var departmentList = new DepartmentListView({
  collection: departments
});

$('.departments').html(departmentList.render().$el);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="departments"></div>
<script type="text/template" id="department-list-template">
  <% _.each(departments,function(deparment){ %>
    <li><span><%= deparment.dept_desc %></span></li>
  <% }); %>
</script>

＆＃13;

Backbone JS - 查看不呈现

3 个答案: