0

私はバックボーンでいくつかの問題を抱えていたので、非常に簡単なチュートリアルを行うことにしました。

これを機能させた後、単純化しようとしましたが、今では機能しません。

問題は、ビューを画面に戻すことだと思います..

ここにコードがあります

var Theater = {
Models: {},
Collections: {},
Views: {},
Templates:{}
}

Theater.Models.Movie = Backbone.Model.extend({})

Theater.Collections.Movies = Backbone.Collection.extend({
model: Theater.Models.Movie,
url: "scripts/data/movies.json",
initialize: function(){
    console.log("Movies initialize")
}
});

Theater.Templates.movies = _.template($("#tmplt-Movie").html())

Theater.Views.Movies = Backbone.View.extend({
el: $("#mainContainer"),
template: Theater.Templates.movies,
//collection: new Theater.Collections.Movies(), //Not needed

initialize: function () {
    _.bindAll(this, "render");
    this.collection.bind("reset", this.render, this);
},

render: function () {
    $(this.el).append(this.template(this.collection.toJSON())) ;
}

})


Theater.Router = Backbone.Router.extend({
routes: {
    "": "defaultRoute" 
},

defaultRoute: function () {
    Theater.movies = new Theater.Collections.Movies()
    new Theater.Views.Movies({ collection: Theater.movies }); 
    Theater.movies.fetch();
}
})

var appRouter = new Theater.Router();
Backbone.history.start();

これが非常に基本的なhtmlです

   <div id="mainContainer"></div>

<script type="text/template" id="tmplt-Movie">

    <div><%=name %> </div>

</script>

ありがとう

4

3 に答える 3

2

this.collection.toJSON())に変換collectionされるjsonため、テンプレートでアクセスしようとしてnameも何も得られません。

renderメソッドは次のように記述できます。

render : function() {
  var _view = this;
  this.collection.each(function(model) {
    $(_view.el).append(_view.template(model.toJSON())); // assuming model has 'name' attribute which is accessed in the template code
  });
}

これはうまくいくはずです。

于 2012-12-06T11:39:28.323 に答える
0

間違ったテンプレートがあります

template: Theater.Templates.movies,

レンダリング機能で使用

var template = _.template( $("#tmplt-Movie").html(), this.collection.toJSON() );
this.$el.html( template );

それを試してみてください。失敗した場合。フェッチが呼び出されていること、コレクションが取り込まれていること、およびレンダリングが呼び出されていることを確認するために、コンソールをログに記録してみてください。render が呼び出されている場合は、dom の選択に関連している可能性がある小さな間違いを修正するだけです。

于 2012-12-06T11:30:36.703 に答える
0

テンプレートにコレクションを提供したいようで、テンプレートはコレクションをループして値を提示する必要があります。テンプレートにコレクションを提供することはできますが、それはおそらく最良の方法ではありません。

主な問題は、モデルを使用する必要がある場所でコレクションを使用しているようです。render 関数では、コレクションをテンプレートに渡しています。テンプレートは Models Json を取る必要があります。

ここでサブビューを使用できます。したがって、コレクションを受け取るプライマリ ビューが必要であり、そのプライマリ ビューはモデルを受け入れるサブビューを呼び出します。

私はjsFiddle.netで例を提供しました。それはややハックです。コレクションをテンプレートに渡す代わりに、コレクションから個々の項目を渡しました。これは 1 つのモデルのみをレンダリングします。ルーティングは混乱を招く可能性があるため、先に進んで削除しました。 jsFiddle.net の例。IE と jsFiddle.net で問題が発生することがあります。Chrome ブラウザの使用をお勧めします。

this.$el.append(this.template(this.collection.at(0).toJSON()));

ちょうど今月、私は Backbone.js に関するより簡単なチュートリアルの作成を開始しました。このチュートリアルのリストは、このページの下部にあります: よりシンプルな Backbone.js の例

近いうちに、コレクションのレンダリングに関する簡単なチュートリアルを作成できるようになることを願っています。

ここに完全なコードがあります

<div id="mainContainer"></div>

var Theater = {
    Models: {},
    Collections: {},
    Views: {},
    Templates: {}
};

Theater.Models.Movie = Backbone.Model.extend({});

Theater.Collections.Movies = Backbone.Collection.extend({
    model: Theater.Models.Movie,
    //url: "scripts/data/movies.json",
    initialize: function() {
        console.log("Movies initialize")
    }
});

Theater.Templates.movies = _.template($("#tmplt-Movie").html());

Theater.Views.Movies = Backbone.View.extend({
    el: $("#mainContainer"),
    template: Theater.Templates.movies,
    //collection: new Theater.Collections.Movies(), //Not needed
    initialize: function() {
        _.bindAll(this, "render");
        this.collection.bind("reset", this.render, this);
    },
    render: function() {
        this.$el.append(this.template(this.collection.at(0).toJSON()));
    }
});


var movies = new Theater.Collections.Movies();

var movieView = new Theater.Views.Movies({ collection: movies });

var myMovies =
[{
    "Id": "BVwi1",
    "Name": "Bag It",
    "AverageRating": 4.6,
    "ReleaseYear": 2010,
    "Url": "http://www.netflix.com/Movie/Bag_It/70153545",
    "Rating": "NR"
},
{
    "Id": "BW1Ss",
    "Name": "Lost Boy: The Next Chapter",
    "AverageRating": 4.6,
    "ReleaseYear": 2009,
    "Url": "http://www.netflix.com/Movie/Lost_Boy_The_Next_Chapter/70171826",
    "Rating": "NR"
}];

movies.reset(myMovies);

これが助けになることを願っています。

于 2012-12-06T16:22:42.297 に答える