从视图中将模型添加到集合中的最佳方法是什么？答案

【问题标题】：What is the best way to add model in a collection from view?从视图中将模型添加到集合中的最佳方法是什么？
【发布时间】：2015-11-25 16:56:14
【问题描述】：

我有一个带有路由器和控制器的 Backbone Marionette 应用程序。在我的应用程序中，您可以查看文本集合（从服务器获取集合的索引路由），可以查看现有文本集合（不从服务器获取的 indexPage 路由），并可以创建新文本（表单路由）。列表文本和创建表单的视图相互不同，并且在区域内发生变化。

我想将成功保存的模型添加到集合中，然后重定向到 indexPage 路由，但是从 _FormView 成功回调获取文本集合的最佳方法是什么？或者如何重构一个应用让它变得简单？

我可以使用 Backbone.Radio 将事件发送到控制器，但我想在没有它的情况下处理。

路线

router.processAppRoutes(controller, {
    '': 'index',
    'index': 'indexPage',
    'create': 'form'
});

控制器

_Controller = Marionette.Controller.extend({
    initialize: function () {
        this.list = new _MainTexts();
    },
    index: function () {
        if (!_.size(this.list)) {

            var
            self = this;

            this.list.fetch({

                success: function (collection, response, options) {
                    self.indexPage();
                    return;
                }
            });
        }
        this.indexPage();
    },
    indexPage: function () {

        var
        textsView = new _TextsView({
            collection: this.list
        });
        application.getRegion('contentRegion').show(textsView);
    },
    form: function () {

        var
        formView = new _FormView({
            model: new _MainText()
        });
        application.getRegion('contentRegion').show(formView);
    }
});

观看次数

_TextView = Marionette.ItemView.extend({

    className: 'item text',
    template: function (serialized_model) {
        return _.template('<p><%= texts[0].text %></p>')(serialized_model);
    }
});

_TextsView = Marionette.CollectionView.extend({
    className: 'clearfix',
    childView: _TextView
});

表单视图

_FormView = Marionette.ItemView.extend({
    template: '#form-template',
    ui: {
        text: 'textarea[name="text"]',
        submit: 'button[type="submit"]'
    },
    events: {
        'click @ui.submit': 'submitForm'
    },
    submitForm: function (event) {

        event.preventDefault();
        this.model.set({

            text: this.ui.text.val()
        });

        this.model.save({}, {
            success: function (model, response, options) {

                ???
            }
        });
    }
});

【问题讨论】：

"可以查看现有的文本集合（indexPage 路由而不从服务器获取）并且可以创建一个新文本（表单路由）"...我不确定是否这些是问题或陈述... “列表文本和创建表单的视图彼此不同，并且区域有所变化。” 列表文本...创建表单...我不知道是什么这些都是。您能否从对您的应用程序一无所知的人的角度阅读这个问题并相应地改写问题..？
@TJ 好吧，也许我把这个问题有点混乱，但我已经找到了解决方案。稍后发布解决方案。
注意：“Controller 对象已被弃用。您应该在普通的 Javascript 对象或 Marionette 对象上指定回调，而不是使用带有 AppRouter 的 Controller 类”-marionettejs.com/docs/v2.4.4/marionette.controller.html
@misantronic 感谢您的注意，我没有检测到已弃用的警告

标签： javascript backbone.js marionette

【解决方案1】：

好的，我的问题解决方案就在这里。在控制器动作“表单”中，我创建了事件监听器

var
formView = new _FormView({

    model: model
});

formView.on('formSave', function (model) {

    if (id == null) {

        self.list.add(model);
    }

    ...
});

然后在表单视图中我触发事件

this.model.save({}, {

    success: function (model, response, options) {

        if (response.state.success) {

            self.trigger('formSave', model);
        }
    }
});

就是这样:)

【讨论】：