2

プロジェクトに Backbone.js を使用しています。
申し訳ありませんが、私はバックボーンの初心者なので、非常に些細なことを見落としている可能性があります。

これは HTML スニペットです。

<table id="notes" class="table">
    <thead>
        <tr><th>title</th><th>comment</th></tr>
    </thead>
    <tbody id="notesTableBody">
    </tbody>
</table>

これは、そのスニペットに HTML を「挿入」することになっているバックボーン コードです。

App.view.NoteListView = Backbone.View.extend({

    el:"tbody#notesTableBody",

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new App.view.NoteListItemView({model:note}).render().el);
        }, this);
        return this;
    }

});

明確にするNoteListItemViewために、関連性がないと思うので、コードを貼り付けていません。

私の問題は、バックボーンによってレンダリングされる HTML コードが次のようになっていることです。

<table id="notes" class="table">
    <tbody id="notesTableBody">
    <tr><td>title 1</td><td>comment 1</td></tr>
    </tbody>
</table>

基本的に、バックボーンはテーブルからスレッドを削除しました。
理由がわかりません - Backbone が削除しないようにするにはどうすればよいですか?

4

1 に答える 1

4

あなたNoteListViewはその外に何も書かないでしょうel（例：http://jsfiddle.net/ambiguous/cFvX2/）ので、あなたの問題は別の場所にあります。

私の推測では、あなたはこれと同等のことをしていたと思います:

var v = new App.view.NoteListView;
$('#notes').html(view.render().el);

#notesこれにより、テーブルの内容が<tbody>(つまりNoteListView)だけに完全に置き換えられelます。

あなたの問題を回避する方法はいくつかあります。呼び出しrenderて、返されるものを無視することができます。

var v = new App.view.NoteListView;
v.render();

それは私の最初のデモフィドルがやったことです。

または、の代わりにidandtagNameelを使用できます。

App.view.NoteListView = Backbone.View.extend({
    id: 'notesTableBody',
    tagName: 'tbody',
    initialize:function () {
        this.model.bind("reset", this.render, this);
    },
    render:function (eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new App.view.NoteListItemView({model:note}).render().el);
        }, this);
        return this;
    }
});

そしてappend、ビューのelto $('#notes'):

var v = new App.view.NoteListView;
$('#notes').append(v.render().el);

デモ: http://jsfiddle.net/ambiguous/HTAkM/

呼び出し元に次を指定させることもできますel。

App.view.NoteListView = Backbone.View.extend({
    initialize:function () {
        this.model.bind("reset", this.render, this);
    },
    render: function(eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new App.view.NoteListItemView({model:note}).render().el);
        }, this);
        return this;
    }
});

そして、の戻り値を気にせずにrender:elrender

var v = new App.view.NoteListView({ el: $('#notesTableBody') });
v.render();

デモ: http://jsfiddle.net/ambiguous/2Ptkp/

私がここにいる間は、$(this.el)もうその必要はありません。Backbone の最近のバージョンでは、this.$el次のようなビューが提供されています。

$エル view.$el

ビューの要素のキャッシュされた jQuery (または Zepto) オブジェクト。常に DOM 要素を再ラップするのではなく、便利なリファレンスです。

ビューがコレクションをラップしている場合は、this.collection代わりに次を使用する必要がありますthis.model。

new SomeView({ collection: some_collection })

ビューはcollectionオプションを次のように特別にmodel扱います。

コンストラクター/初期化 new View([options])

[...] 渡された場合、ビューに直接アタッチされる特別なオプションがいくつかあります: model、collection、el、id、className、tagNameおよびattributes。

バックボーン コレクションにはいくつかの Underscore メソッドも混在しているため、次のように言う必要はありません。

_.each(some_collection.models, function(m) { ... });

コレクションで直接呼び出すことができますeach：

some_collection.each(function(m) { ... });

また、"reset"イベントにバインドしている場合:

this.model.bind("reset", this.render, this);

さらに何かを追加する前に、renderをクリアする必要があるでしょう。el

render: function() {
    this.$el.empty();
    this.collection.each(function(note) { ... });
}

そうしないとempty、elおそらくその内容を新しいものに置き換えるつもりであるときに、さらに多くのものを追加することになります。

于 2012-05-23T21:54:24.887 に答える