1

私はバックボーンの初心者なので、これは単純なテンプレートをレンダリングする非常に単純な例です。このテンプレートのレンダリングに問題があります。Chrome でのみ動作します。「this.collection.fetch()」の後にこのコードをデバッグすると、MasterView オブジェクトは空ですが、Chrome にはコレクションがあります。Chrome では機能するのに、他のブラウザーでは機能しない理由はわかりません。

index.html

    <div class="Presentation">

    </div>

    <script id="slideTemplate" type="text/template">
        <h1><%=slide_title %></h1>
        <h2><%=slide_subheading %></h2>
        <div> <%=content %> </div>
    </script>

モデル

define(['backbone','underscore'],function(Backbone,_){
var linkModel = Backbone.Model.extend({
        defaults: {
                    slide_title: "slide", 
        slide_subheading: "sub slide 1",
        content: "bla bla bla"
         }
     });

return linkModel;
    });

コレクション

define(['backbone','underscore','models/link','libs/backbone-localstorage'],function(Backbone,_,link,storage){
var linkModels = Backbone.Collection.extend({
    model: link,
    localStorage: new storage('links')

});

return linkModels;
    });

シングルビュー

define(['jquery','backbone','underscore'],function($,Backbone,_){
var linkView = Backbone.View.extend({
    tagName: "article",
    className: "slide-container",
    template: $("#slideTemplate").html(),
    render: function(){
        var tmpl = _.template(this.template);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});

return linkView;
    });

マスタービュー

define(['jquery',
    'backbone',
    'underscore',
    'collections/links',
    'views/linkView', 'views/data'], function($, Backbone,_,links,linksView,data){
var favsView = Backbone.View.extend({
    el: $(".Presentation"),
    initialize: function(){
        var self = this;
        this.collection = new links(slides);    
        _.bindAll(this, 'renderLink', 'renderAll');         

              this.collection.fetch();
      this.renderAll();
    },
    renderAll: function(){
        this.collection.each(
            this.renderLink
        );
    },
    renderLink: function(model){
        var view = new linksView({model: model});
        this.$el.append(view.render().el);
        model.save();
    },
    render: function(){
        console.log("Ready...");
    }
});

return new favsView;
  });
4

1 に答える 1

1

ここに単純な「AJAXのAは非同期の略」という問題があります。

  this.collection.fetch();
  this.renderAll();

fetchはAJAX呼び出しであるため、実行時にコレクションに何かが含まれる保証はありませんrenderAll。

推奨される（私の推奨される）アプローチは、次の2つのことを行うことです。

  1. renderビューのメソッドをコレクションの"reset"イベントにバインドします。renderこれにより、コレクションがサーバーからフェッチされたときに呼び出しがトリガーされます。
  2. renderテンプレートを変更して、空のコレクションで適切な処理を実行します。「読み込み中...」というメッセージを表示したり、 「アイテムなし」などと表示したりできます。

コードは次のようになります。

initialize: function() {
    // Always do this first to be sure that your function
    // references refer to the right things.
    _.bindAll(this, 'render', 'renderLink');

    this.collection = new links(slides);
    this.collection.on('reset', this.render);
    this.collection.fetch();
    this.render(); // If you must.
},
render: function() {
    // And update your template to with a "loading..." message
    // of some sort...
    this.collection.each(this.renderLink);
    return this; // A good convention.
},
renderLink: function(model) {
    var view = new linksView({model: model});
    this.$el.append(view.render().el);
}

この方法はレンダリング用であり、仕事をするものを導入することrenderによって物事を過度に複雑にしないでください。また、内部での呼び出しは少し奇妙です。モデルはサーバーから取得されたばかりであり、通常はユーザーイベントに応じてモデルを更新するアクションの横に呼び出しを配置するため、モデルはすでにサーバー上にあるはずです。renderAllrendermodel.save()renderLinkfetchsave

于 2012-10-28T17:54:06.630 に答える