1

バックボーンを機能させるための絶対最小スクリプトを探しています。さまざまなチュートリアルとサンプルをつなぎ合わせようとしましたが、ビューを機能させるのに問題がありました。派手なことは何もありません。今すぐブラウザーで生の json を取得します。点をつなげて構築するのに役立つ基本的なスケルトンです。次のさまざまなバリエーションを試しました。

(function ($) {

    var model = Backbone.Model.extend({
        idAttribute: 'custId'
    });

    var collection = Backbone.Collection.extend({
        initialize: function(){
        },
        model: model,
        url: '/cust'
    });

    var view = Backbone.View.extend({
        initialize: function(){
            _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
            this.collection.bind("reset", this.render);

            this.render();
        },
        el: $('#content'),
        template: Handlebars.compile($("#contentTemplate").html()),
        render: function(){
            $(this.el).html( this.template(this.model.toJSON()));
        },
        tagName: "li"
    });

    var router = Backbone.Router.extend({
        initialize: function(){
            var newCollection = new collection;
            newCollection.fetch();
        },
        route: {
            "": "home"
        },
        home: function(){
            this.view = new view({collection: newCollection});
            $('#content').html(this.view.el);
        }
    });

    var app = new router();
}(jQuery))

ありがとう。

4

1 に答える 1

1

el属性を悪用しています。$('#content').html(this.view.el)要素をそれ自体の中にコピーすることになり$('#content')ます (view.el が と等しいため$('#content'))。

elビューオブジェクトから属性を削除して、それ自体を生成するようにしてください。その後、$('#content').html(this.view.el);動作するはずです。

もう 1 つの考えられる問題は、要素内のコレクション全体をレンダリングしているということliです。これが目的でしたか? これを行う最善の方法は、コレクション内の各モデルがliタグを表し、コレクションがタグを表すようにすることulです。

その他の問題:

  • 要素はコレクションを受け取ってviewいますが、モデルをレンダリングしようとしています
  • ルーターでnewCollectionは、ホームメソッドではアクセスできません
  • あなたは電話していませんBackbone.history.start()

コードを書き直す方法は次のとおりです。

var model = Backbone.Model.extend({
    idAttribute: 'custId'
});

var model_view = Backbone.View.extend({
    template: Handlebars.compile($("#modelTemplate").html()),
    tagName: 'li',
    initialize: function() {
        _.bindAll(this, 'render');
        this.render();
        this.on('change',this.render);
    },
    render: function() {
        $(this.el).html( this.template(this.model.toJSON()) );
        return this;
    }
});

var collection = Backbone.Collection.extend({
    initialize: function(){
    },
    model: model,
    url: '/cust'
});

var collection_view = Backbone.View.extend({
    tagName: "ul",
    initialize: function(){
        _.bindAll(this, 'render','renderModels');
        this.render();
        this.renderModels();
        this.collection.bind("reset", this.render);
        this.collection.bind("reset", this.renderModels);
    },
    render: function(){
        // just create the 'ul' tag; we will populate it with model view elements; a collection template is no longer needed
        return this;
    },
    renderModels: function() {
        this.collection.each(function(obj){
            var view = new model_view({
                model: obj
            });
            $(this.el).append(view.el);
        },this);
    }
});

var router = Backbone.Router.extend({
    initialize: function(){
        this.newCollection = new collection();
        this.newCollection.fetch();
    },
    route: {
        "": "home"
    },
    home: function(){
        this.view = new collection_view({collection: this.newCollection});
        $('#content').html(this.view.el); // #content should not be a 'ul' tag, the 'ul' is generated by the collection_view
    }
});

var app = new router();
Backbone.history.start();

それに応じてテンプレートを更新してください。

エラーの可能性をお許しください。コードをテストする手段がありませんでしたが、使用すべきロジックを指摘していると思います。

乾杯！

于 2012-11-09T12:15:45.300 に答える