Question

我正在使用Backbone.js 0.9.10,1.4.4 Underscore.js。当我调用我的html页面时，没有javascript错误，控制台显示该集合已被迭代。

但是，浏览器没有显示我的HTML我得到了空白页面。我在控制台上记录了html的结果，并且没有用json替换模型的变量，就像那样：

（我退出了标签中的信号（＆lt;＆gt;），以显示控制台上显示的html模板。）

我的html来自view =
p a href =“＃”id =“remove-button”＆gt; remover este Post / a / p h2 / h2 p / p＆gt;

//HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Backbone COLLECTION</title>
<script src="../js/jquery/jquery-1.8.3.js" type="text/javascript" charset="utf-8">
</script>
<script src="../js/backbone/underscore.js" type="text/javascript" charset="utf-8">
</script>
<script src="../js/backbone/backbone.js" type="text/javascript" charset="utf-8"> 
</script>
<script src="../js/mvc/PostModel.js"></script>
<script src="../js/mvc/PostView.js"></script>
<script src="../js/mvc/PostCollectionView.js"></script>
<script src="../js/mvc/PostCollection.js"></script>    
<script>
$(document).ready(function() {            
        var postList = new PostList();
        var postCollectionView = new PostCollectionView({collection:postList});
        postList.fetch();
});

</script>
</head>

<body>

<script type="text/template" id="post-template">
<p>
    <a href="#" id="remove-button">Remover este Post</a>
</p>
<h2><%=title%></h2>
<p><%=text%></p>
</script>

</body>
</html>   


//VIEW
var PostView = Backbone.View.extend({
events: {
    "click #remove-button": "removePost"
},

initialize: function() {
    _.bindAll(this, 'render', 'removePost', 'refresh');

    this.template = _.template($('#post-template').html());

    this.model = new PostModel();

    this.model.on("change", this.render, this);
    this.model.on("destroy", this.refresh);
},

render: function() {
    console.log('PostView - render ');//ok

    var template = this.$el.html(this.template(this.model.toJSON()));

    return this;
},

removePost: function() {
    this.model.destroy();
},

refresh: function() {
    this.model.clear({silent: true});
    this.model.fetch();
}
});    

//MODEL
var PostModel = Backbone.Model.extend({
defaults : function(){
    return {
        //some
        title: [],
        text: []
    }
}
});    

//COLLECTION
var PostCollectionView = Backbone.View.extend({
    initialize: function(){
    this.collection.on('add', this.addOne, this);
    this.collection.on('reset', this.addAll, this);
},

addOne: function(modelItem){
    var postView = new PostView({model: modelItem});
    console.log('my html come from view = ' + postView.render().$el.html());
    this.$el.append(postView.render().$el.html());        
},

addAll: function(){
    this.collection.forEach(this.addOne, this);
},

render: function(){
    this.addAll();
}
});

//Collection with URL
var PostList = Backbone.Collection.extend({
    url: 'http://www.mysystem.com/newproject/project/cadTarefas/recuperarListaTeste',

    model: PostModel
});

//My JSON
[{"title":"titulo_1","text":"texto_1"},{"title":"titulo_2","text":"texto_2"},
{"title":"titulo_3","text":"texto_3"},{"title":"titulo_4","text":"texto_4"}, 
{"title":"titulo_5","text":"texto_5"},{"title":"titulo_6","text":"texto_6"},
{"title":"titulo_7","text":"texto_7"},{"title":"titulo_8","text":"texto_8"},
{"title":"titulo_9","text":"texto_9"},{"title":"titulo_10","text":"texto_10"}]

Answer 1

在渲染视图中尝试更改字符串

var template = this.$el.html(this.template(this.model.toJSON()));

到字符串

this.$el.html(this.template(this.model.toJSON()));

Answer 2

我在任何代码中都没有看到的一件事是PostCollectionView的元素附加到DOM。它应该有一个静态声明，即

var PostCollectionView = Backbone.View.extend({
    el: $('#somediv'),

或外部的，

$(document).ready(function() {            
    var postList = new PostList();
    var postCollectionView = new PostCollectionView({collection:postList, el: $('#somediv')});

或者您的控制器负责在初始化View之后将动态分配的一个附加到DOM。其中一个必须是真的。

其次，在PostView中，在传入现有模型之后，使用行this.model = new PostModel();销毁它，它会用新的空白模型覆盖传入的对象本地引用，这就是为什么你要这样做的原因。没有看到任何东西。

Backbone Collection View不显示de html和Model的值

2 个答案: