bone.js无法在ul内部渲染li [英] backbone.js unable to render li inside ul

问题描述

boost.js的新手，并且视图渲染部分有问题.请在下面找到代码，无法在ul.Html部分中打印li

Am new to backbone.js and having problem with the view render part. please find the code below , am unable to print li inside the ul.Html part is given below

<ul id="listview"></ul>
<script type="text/template" id="item">
  <li><%= author %></li>
</script>

和js部分

var book = Backbone.Model.extend();
var cols = Backbone.Collection.extend({
    model:book,
    url:"http://localhost/bbq/books.php"
});

var col  = new cols();
var view = Backbone.View.extend({

 el:'#listview',
 initialize:function () {
     _.bindAll(this, "render"); 
     this.model.fetch({
        success:this.render  
    });
 }, 

 render: function () {
      _.each(this.model.models, function (mode) {
          $(this.el).append( new listUsers({model:mode}).render.el );
     },this);
     return this;
 }

});

var listUsers = Backbone.View.extend({
   template: _.template($('#item').html()),
   render:function () {  
     $( this.el ).html( this.template( this.model.toJSON() ) );  
     return this;
   }
});
var vieb = new view({ model : col });

推荐答案

一个问题是您没有调用子视图的render方法.

One issue is that you are not invoking the render method of child views.

更改

$(this.el).append( new listUsers({model:mode}).render.el

到

$(this.el).append( new listUsers({model:mode}).render().el

您的代码可以更好地编写如下:

Your code can be better written as follows:

var Book = Backbone.Model.extend();
var Books = Backbone.Collection.extend({
  model: Book,
  url: "http://localhost/bbq/books.php"
});
var ListUsers = Backbone.View.extend({
  template: _.template($('#item').html()),
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

var Booksview = Backbone.View.extend({
  el: '#listview',
  initialize: function() {
    _.bindAll(this, "render");
    this.collection.fetch({
      success: this.render
    });
  },
  render: function() {
    this.collection.each(function(model) {
      this.$el.append(new ListUsers({
        model: model
      }).el);
    }, this);
    return this;
  }
});

var books = new Books();
var view = new Booksview({
  collection: books
});

这篇关于bone.js无法在ul内部渲染li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！