1

多くのチュートリアルを読み、.net で検索を行いましたが、それでも Backbone.js に問題があります。これは私の簡単なシナリオです:

Rails アプリケーションは、オブジェクトの JSON コレクションを使用して GET 要求に応答します。DOM の準備ができたら、バックボーン コレクションを使用してテーブル行のリストを動的に作成したいと考えています。これは私を混乱させているコードです：

HTML 部分: 

  <script type="text/template" id="tmplt-Page">
      <td>{{=title}}</td>
      <td>{{=description}}</td>
  </script>

バックボーンのスクリプト:

$(function(){
    var Page = Backbone.Model.extend({});

    var Pages = Backbone.Collection.extend({
        model: Page,
        url: '/pages'
    });
    var pages = new Pages([
        {title: 'ProvA1', description: ''},
        {title: 'ProvA2', description: ''}
    ]);

    var PageView = Backbone.View.extend({
        tagName: 'tr',
        template: _.template($('#tmplt-Page').html()),

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

    });

    var AppView = Backbone.View.extend({
        el: $("#results"),

        initialize: function () {
            _.bindAll(this, 'render');
            pages.on('reset', this.render)
        },

        render: function() {
            this.$el.empty();
            pages.each( function( page ) {

                var view = new PageView({
                  model : page
                });

                this.$el.append(view.render().el);

            });

            return this;
        }

    });

    var appview = new AppView;

});

画面には何もレンダリングされません。

2つの問題があるようです：

1) fetch() は非同期であるため、コードは ajax ラウンドトリップが終了する前に実行されます。

2) コレクションにいくつかのオブジェクトを手動でロードした場合、このコード「this.template(this.model.toJSON())」は jSON 属性を置き換えません。

編集 ：

口ひげタグを使用するために、私はすべての前にこのコードを書きました:

ここに画像の説明を入力

4

1 に答える 1

2

まず、あなたが言ったように、fetch()非同期ですが、完了すると「リセット」イベントがトリガーされるため、これを に追加する必要がありますAppView.initialize。

pages.on('reset', this.render)

次に、PageView の HTML をどこにも挿入しません。これを追加しAppView.renderます：

// at the beginning var self = this; // and in the forEach loop self.$el.append(view.el);

第三に、 の冒頭でAppView.render、 の内容をクリアする必要がありますthis.$el。

編集：

まだいくつかの問題がありました。

  • 口ひげタグ ( {{ }}-> <%= %>)でアンダースコア テンプレートを使用しています。
  • self = thisレンダリングにvarがありません
  • あなたは電話していませんappview.render()！:)

jsfiddle で動作するコードは次のとおりです: http://jsfiddle.net/PkuqS/

于 2012-11-04T17:43:59.927 に答える