Backbone JS - 视图未呈现

Question

我正在尝试获取一个简单的 html 页面以在 html 页面上显示检索到的 collection 数据。没有抛出任何错误，所以我不知道我做错了什么。

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

型号

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

Collection

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 调用完成之前调用渲染。只需使用 deferred 并在 fetch 完成时调用 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

由于您没有项目视图，我认为最好迭代集合视图的模板。确保在集合获取方法成功后创建视图 instance/call 并呈现它。

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

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

<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>

Backbone JS - 视图未呈现

Backbone JS - View not rendering

backbone.js