0

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

あなたのコードに見当たらないことの 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')});

または、コントローラーは、ビューが初期化された後、動的に割り当てられたコントローラーを DOM にアタッチする責任があります。そのうちの 1 つが真実でなければなりません。

第 2 に、PostView では、既存のモデルを渡した後、それを行this.model = new PostModel();で破棄します。これにより、渡されたオブジェクト ローカル参照が新しい空のモデルで上書きされます。これが、何も表示されない理由です。

于 2013-03-17T05:44:08.107 に答える