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

【问题标题】：Backbone Collection View doesn't show de html and values of ModelBackbone Collection View 不显示 de html 和 Model 的值
【发布时间】：2013-03-17 17:35:02
【问题描述】：

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

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

（我取消了标记中的信号（）以显示出现在控制台上的 html 模板。）

我的 html 来自视图 =
p a href="#" id="remove-button" >Remover este Post/a /p h2 /h2 p /p>

//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"}]

【问题讨论】：

标签： javascript backbone.js underscore.js

【解决方案1】：

我在您的任何代码中都看不到的一件事是 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(); 行将其销毁，这会用新的空白模型覆盖传入的对象本地引用，这就是你没有看到的原因任何东西。

【讨论】：

嗨精灵。关于删除 his.model PostModel = new (); 行的提示是基本的。真正的 json 开始出现在控制台的打印中。但是没有显示html。然后我转到下划线 Mustache.js：initialize: function () { this.template = $ ('# post-template')。 html(); ..... } addOne: function (ModelItem) { var render = Mustache.to_html (this.template, modelItem.toJSON ()); console.log（渲染）； $ ('#sampleArea')。附加（渲染）；它工作正常！非常感谢！

【解决方案2】：

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

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

到字符串

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

【讨论】：