2015-12-21 15 views
0

对于backbone.js来说是新的,并且在视图渲染部分有问题。请看下面的代码,里面的ul.Html部分下面backbone.js无法渲染里面的内容ul

<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 }); 
+0

我已经看到了这个'$(this.el).append(新的列表用户({model:mode})。render.el'模式在很多问题中可能...我可以从你在哪里学习这个知识..? –

回答

1

一个问题给出我无法打印华里,你是不是调用的方法render儿童的意见。

变化

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

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

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

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 
}); 
+0

谢谢,那工作d – user1679267