0

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

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

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

我的 html 来自 view =
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"}]
4

2 回答 2

0

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

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

串起来

this.$el.html(this.template(this.model.toJSON()));
于 2013-03-17T05:34:35.867 回答
0

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

于 2013-03-17T05:44:08.107 回答