2015-12-21 17 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