0

私は一日中問題に直面しており、ちょっと必死です! ここにいる一部のバックボーンの専門家にとって、これは簡単なことだと確信しています...私はバックボーンに不慣れで、最善のアプローチをとっていない可能性があります。どんな助けやアドバイスも素晴らしいでしょう！

問題

コレクションに新しいアイテムを追加した後、コレクションが再レンダリングされ、DOM に追加された新しいアイテムを確認できます。「削除」ボタンをクリックすると、イベントが発生し、新しいアイテムが破棄されます...しかし、要素はDOMに残ります。ページを再レンダリングすると (更新するか、別の場所に移動して戻ってきます)、消えてしまいます。

一方、新しいアイテムを追加し、コレクションがレンダリングされた直後に別の場所に移動し、戻ってきて「削除」を押すと、今回は破棄され、DOM から削除されます...何か考えはありますか?

新しいアイテムの追加

save: function(e){
    e.preventDefault();
    var data = form2js('deviceForm', '.', true);
    //Allow to create or edit a model;
    this.model.set(data);
    this.model = this.collection.create(this.model, {
        wait: true,
        success: function(){
            Utils.alert('success', 'Device has been added/edited');
            app.vent.trigger("devices:show");
        }
    });
}

このコードは、新しいアイテムを追加したときに表示されるビュー内にあります。新しいアイテムが追加されると、以下の関数が呼び出されます。this.collection は、ルーター内で再利用されるデバイスのリストです。

ルーター

showDevices: function(){
    if (!this.devices){
        this.devices = new Devices();
        this.devices.fetch();
    }
    if (this.devicesList) this.devicesList.remove();
    this.devicesList = new DevicesView({collection: this.devices});
    $('.addPadding').hide().slideDown(1000, 'linear').html(this.devicesList.render().el);
},

リストを 1 回だけ取得し、必要なときに再利用して、不必要な取得を回避します。ビューが存在する場合はクリーンアップし、新しいビューをインスタンス化します。

コレクション (ビュー)

initialize: function(){
    _.bindAll(this, "render", "addOne");

    this.collection.on('add', this.addOne);
    this.collection.on('reset', this.addAll);
},
render: function(){
    this.$el.html(this.template);
    this.addAll();
    return this;
},
addOne:function(device){
    var devi = new DeviceView({model: device});
    this.$el.find(".devices-list").append(devi.render().el);
},
addAll: function(){
    this.collection.each(this.addOne, this)
}

コレクション ビューに el 属性が定義されていません。コレクションイベントにバインドして、新しいアイテムまたはフェッチが完了するようにレンダリングします。

アイテム ビュー

tagName: 'tr',
events: {
    'click .remDevice': 'removeDevice',
    'click .editDevice' : 'editDevice'
},
template: _.template( template ),
initialize: function(){
    this.listenTo(this.model, 'destroy', this.remove);
},
render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
},
removeDevice:function(){
    this.model.destroy();
}

私のアイテムは、テーブルの tbody 要素に追加されます。このテーブルは、コレクション ビューのテンプレート内にあります。削除ボタンをクリックすると、モデルが破棄され、イベントが発生して this.remove が呼び出されます。ただし、アイテムの作成直後にコレクションが再レンダリングされると機能しません。ただし、後で動作します...

十分な情報を提供したことを願っています！よろしくお願いします！PS: コンソールにエラーはなく、モデル + コレクションがデバッガーに取り込まれます。

編集:モデルが毎回破棄されるため、クリックごとに this.remove が呼び出されます。それをオーバーライドし、次の方法で要素を手動で削除しようとします。

this.$el.remove();

違いはなく、エラーも表示されません。this.$el には、新しく追加した要素が含まれています。

編集 2 新しい手がかり: 6 つのデバイスのコレクションがある場合、7 つ目を追加してから、それらのいずれかを削除しようとすると、それらは破棄されますが、再レンダリングを行わない限り DOM から削除されません。したがって、新しいアイテムのみにリンクされているのではなく、コレクションに新しいアイテムを追加してレンダリングし、1 つのアイテムを削除しようとしているという事実にリンクされています。また、EDIT 機能は引き続き各項目で機能し、編集する適切なモデルを含む適切なページにリダイレクトされます。

最終編集ゾンビを避けるために新しいアイテムを追加する前に、コレクションを空にしようとしましたが、何も変更しませんでした。コレクションビューでランダムな副作用を回避できればよかったのに

addAll: function(){
                this.$el.find(".devices-list").empty();
                this.collection.each(this.addOne, this)
            },
4

1 に答える 1

0

問題を解決する「汚い」方法を見つけました。「削除機能」内にブレークポイントがありました。this.$el とテーブルに追加された行を視覚的に比較すると、まったく同じ行でした。

だから私はこれをやろうとしました：

$('.devices-list').find(this.$el)

しかし、何も返されませんでした...まったく同じデータが含まれているため、これはクレイジーです! this.$el はゾンビ バージョンか何かでレンダリングされると仮定しました。その点に到達するためにアイテムがレンダリングされる方法に何か問題があると確信しています...しかし、私は間違いなく見つけることができず、提案を受け付けています...

解決

Device View/Item Viewで、これら 2 つの関数を編集し、モデル ID を tr に追加してから、jquery を使用して DOM で検索しました。このように、キャッシュされたjqueryのものである $el ではなく、既存の要素に焦点を当てます...

render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.attr('id', this.model.id);
        return this;
    },
remove: function(){
            var elem =  $('.devices-list').find('#'+this.model.id);
            $(elem).find('#'+this.model.id).slideUp(1000);
            $(elem).find('#'+this.model.id).remove();
        }

うまくいけば、誰かがより良いアイデアを得るか、誰かが私の解決策によって助けられるでしょう!

于 2013-05-10T01:41:22.103 に答える