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

这可以让您做到：

如果需要，您可以很容易地显示错误视图。您可以将<{1}}替换为

initialize

然后添加以下内容，确保您创建一个VFormError视图。

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

Answer 2

你应该可以写

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

你为什么这样做

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

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

Answer 3

如果您使用Marionette，则不要直接调用渲染，而是使用Marionette.Region来显示您的观点。

木偶的最佳方式做自我渲染

3 个答案: