javascript - 自己レンダリングを行うマリオネットの最良の方法

Question

こんにちは、ここに私の小さなコードがあります:

これをもっと操り人形にする方法がわかりません...保存機能がバックボーンに似すぎています...

 self.model.save(null, {
        success: function(){
            self.render();
            var vFormSuccess = new VFormSuccess();
            this.$(".return").html(vFormSuccess.render().$el);
        }
var VFormSuccess = Marionette.ItemView.extend({
        template: "#form-success"

} );

http://jsfiddle.net/Yazpj/724/

Answer 1

イベントを使用して成功ビューを表示し、別の場所に移動する場合はレイアウトを使用して成功ビューを表示します。

MyLayout = Marionette.Layout.extend({
    template: "#layout-template",
    regions: {
        form: ".form",
        notification: ".return"
    }
    initialize: function () {
        this.listenTo(this.model,'sync',this.showSuccess);
        this.form.show(new FormView({model: this.model}));
    },
    showSuccess: function () {
        this.notification.show(new VFormSuccess());
    } 
});

または、1 つの領域だけで同じことを行い、FormView をレイアウト自体にすることもできます。に存在する通知領域に一致する要素があることを確認する必要がありlayout-templateます。

MyLayout = Marionette.Layout.extend({
    template: "#layout-template",
    regions: {
        notification: ".return"
    }
    initialize: function () {
        this.listenTo(this.model,'sync',this.showSuccess);
    },
    showSuccess: function () {
        this.notification.show(new VFormSuccess());
    } 
});

これによりできること:

必要に応じて、エラー ビューを非常に簡単に表示できます。initializeあなたはと置き換えることができます

initialize: function () {
    this.listenTo(this.model,'sync',this.showSuccess);
    this.listenTo(this.model,'error',this.showError);
},

次に、以下を追加して、VFormError ビューを確実に作成します。

showError: function () {
    this.notification.show(new VFormError());
} 

Answer 2

Marionette を使用する場合は、render を直接呼び出すのではなく、代わりに Marionette.Region を使用してビューを表示します。