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());
    } 
});

或者，您可以只对一个区域执行相同的操作，并让 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

你应该可以写

self.model.save(null, {
  success: function(){
    self.render();
  }
  ...

你为什么做这个

this.$(".return").html(vFormSuccess.render().$el);

如果您将该模板定义为视图模板，您可以简单地使用 引用它$el，如果您需要两个不同的模板，那么您可能会考虑使用Controller来决定使用什么以及谁使用它。

Answer 3

如果您使用 Marionette，则不要直接调用 render 而是使用 Marionette.Region 来显示您的视图。