0

私はここで質問の1つにサンプルコードを載せていましたが、この問題に遭遇しました。私は、単純なものが欠けていることを明確に知っていますが、何を推論することはできません。単純なコレクションのレンダリングはDOMには表示されませんが、コンソールでのデバッグ中に表示されます。コードは少し長い（冗長）ため、ここで複製する必要はありませんでした。jsfiddleを持っているそれを見てください

JsFiddle

http://jsfiddle.net/zRSg3/2/

ビューは次のようになります。

/*Provides visual display of category*/
var categoryView = Backbone.View.extend({
    tagName: "div",
    template:_.template($("#categoryView").html()),
    className: "category-view",
    initialize: function() {
    },
    render: function() {
        $(this.el).empty().html(this.template(this.model.toJSON()));
        return this;
    }    
});

/*visual display of how categories looks*/
var categoriesView = Backbone.View.extend({
    el: "#accordian",
    render: function() {    
        this.collection.each(this.renderEach,this);
        return this;
    },
    renderEach: function(mod,index,arr) {
        $(this.el).empty().append(new categoryView({model:mod}).render().el);
    },
    events: {
        "load": "initAccordian"
    },
    initAccordian: function() {

    }
});

そしてそれらはこのようにレンダリングされます：

var userCategoriesView = new categoriesView({collection:userCategories});
userCategoriesView.render();​
4

3 に答える 3

1

あなたの最初の問題は、あなたが「アコーディオン」を綴ることができないということです（しかし、私もそうすることができないので、それほど悪くは感じません）：

el: "#accordian",

する必要があります：

el: "#accordion",

次の問題はrenderEach、コレクションの各ステップですべてのHTMLをクリアして、最後の要素のみがレンダリングされるようにすることです。

renderEach: function(mod,index,arr) {
    $(this.el).empty().append(new categoryView({model:mod}).render().el);
},

empty()電話を切る：

renderEach: function(mod,index,arr) {
    $(this.el).append(new categoryView({model:mod}).render().el);
},

あなたが抱えるもう一つの問題は、loadあなたにも何もないということです#accordion。

events: {
    "load": "initAccordian"
},

何もしません。自分で電話する必要がinitAccordianあります（おそらくスペルも修正したいと思うでしょう）。が呼び出される前にブラウザが再び制御できるようになるまで待つ必要がある場合は、時間をゼロにしてaをinitAccordion使用できます。setTimeout

render: function() {
    var that = this;
    this.collection.each(this.renderEach,this);
    setTimeout(function() { that.initAccordion() }, 0);
    return this;
}

この「タイムアウトゼロ」ハックは、作業を完了する前にブラウザですべての位置とサイズを取得する必要がある場合に役立ちます。

また、Backboneの新しいバージョンでは、ビューにjQuery化されたバージョンのinが提供さthis.elれthis.$elているため、を実行する必要はありません$(this.el)。

これがあなたのフィドルのクリーンアップされたバージョンです：http：//jsfiddle.net/ambiguous/EMMrD/

于 2012-05-14T06:10:08.020 に答える
1

accordion名前を付けて、要素にHTMLのIDを指定しましたが、ビュー#accordianをセレクターとして渡しました。その小さな変更でフィドルを修正しました。

余談ですが、拡張バックボーンクラスを格納するために使用している変数を大文字にすることをお勧めしますか？小文字を使用すると、インスタンスと間違えやすくなります。

于 2012-05-14T06:10:29.343 に答える
0

elビューのコンストラクターへのパスを忘れました。

変更するだけです：var userCategoriesView = new categoriesView({collection:userCategories});に：

var userCategoriesView = new categoriesView({collection:userCategories, el: $('#accordion')});

于 2012-05-14T05:31:07.320 に答える