Question

我有以下路由器：

define([
    'backbone.marionette',
    'app',
    'views/products/list',
    'views/products/browsing_filter',
    'views/products/detail',
    'views/dashboard/index',
    'views/layout'
],
function(Marionette, App, ProductListView, BrowsingFilterView, ProductDetailView, LayoutView){
    var AppRouter = Backbone.Marionette.AppRouter.extend({
        routes: {
            'product/:id': 'showProduct',
            'products/:id': 'showProduct',
            'products': 'listProducts',
            '*path': 'showDashboard',
        },

        listProducts: function(path) {
            App.contentRegion.show(new ProductListView());
            product_filter_view = new BrowsingFilterView();
        },

        showProduct: function(id) {
            App.contentRegion.show(new ProductDetailView({id: id}));
        },

        showDashboard: function() {
            return require(['views/dashboard/index', 'collections/newsfeed_items','models/newsfeed_item'], function(DashboardView, NewsfeedItemCollection, NewsfeedItem) {
                App.contentRegion.show(new DashboardView({
                    collection: new NewsfeedItemCollection(),
                    model: new NewsfeedItem()
                }));
            });
        }
    });

    return AppRouter;
});

当一个路线被调用时，它工作正常。但是，当调用下一个路径时，区域App.contentRegion的容器将被清空，并且不会呈现新内容。

当调用新路由时，AJAX请求按原样完成，视图似乎只是分离或根本不呈现。

有什么问题？

修改： ProductDetailView：

define([
    'jquery',
    'backbone',
    'models/product',
    'models/product_property_value',
    'models/product_property',
    'hbs!template/product_detail/detail',
    'hbs!template/product_detail/edit_string',
    'collections/product_property_values',
    'collections/newsfeed_items',
    'hbs!template/newsfeed/feed'
],
function($, Backbone, ProductModel, ProductPropertyValueModel, ProductPropertyModel, ProductDetailTemplate, StringEditTemplate, ProductPropertyValueCollection, NewsfeedItemCollection, FeedTemplate){
    ProductDetailView = Backbone.View.extend({
        el: '#product_detail',
        product_id: null,
        events: {
            'click a.show_edit': 'triggerEdit',
            // 'click div.edit_container a.save': 'saveChanges',
            'submit form.edit_property_value': 'saveChanges',
            'click a.cancel_edit': 'cancelEdit'
        },
        initialize: function(param){
            this.product_id = param.id;

            this.product = new ProductModel({'id': this.product_id});
            this.product.fetch();

            this.newsfeeditems = new NewsfeedItemCollection({'product': {'id': this.product_id}});
            this.listenTo(this.newsfeeditems, 'change', this.renderFeed);
            this.listenTo(this.newsfeeditems, 'fetch', this.renderFeed);
            this.listenTo(this.newsfeeditems, 'sync', this.renderFeed);
            this.newsfeeditems.setProductId(this.product_id);
            this.newsfeeditems.fetch({reset:true});

            this.listenTo(this.product, 'change', this.render);
            this.listenTo(this.product, 'fetch', this.render);
            this.listenTo(this.product, 'sync', this.render);
        },

        renderFeed: function(r) {
            context = this.newsfeeditems.toJSON();
            this.$el.find('#product_newsfeed').html(FeedTemplate({items:context}));
        },

        edit_container: null,
        product_property_model: null,
        triggerEdit: function(r) {
            r.preventDefault();
            this.cancelEdit();
            editable_container = $(r.target).parents('.editable').first();
            product_property_value_ids = editable_container.data('property-value-id');

            edit_container = $(editable_container).find('div.edit_container');
            if(edit_container.length === 0) {
                console.log(edit_container);
                editable_container.append('<div class="edit_container"></div>');
                edit_container = $(editable_container).find('div.edit_container');
            }

            this.edit_container = edit_container;

            value_init = [];
            for(var i = 0; i < product_property_value_ids.length; i++) {
                value_init = {'id': product_property_value_ids[i]};
            }

            if(product_property_value_ids.length > 1) {
                throw new Exception('Not supported');
            }

            this.edit_value = new ProductPropertyValueModel({'id': product_property_value_ids[0]});

            this.listenTo(this.edit_value, 'change', this.renderEditField);
            this.listenTo(this.edit_value, 'reset', this.renderEditField);
            this.listenTo(this.edit_value, 'fetch', this.renderEditField);
            this.edit_value.fetch({'reset': true});

            return false;
        },

        cancelEdit: function() {
            this.$el.find('.edit_container').remove();
        },

        renderEditField: function() {
            edit_container.html(StringEditTemplate(this.edit_value.toJSON()));
        },

        saveChanges: function(r) {
            r.preventDefault();
            console.log('save changes');
            ev = this.edit_value;

            _.each($(r.target).serializeArray(), function(value, key, list) {
                ev.set(value, key);
            });
            ev.save();
        },

        render: function(r) {
            context = this.product.toJSON();
            this.$el.html(ProductDetailTemplate(context));

            $(document).foundation();
            return this;
        }
    });

    return ProductDetailView;
});

Answer 1

在我们的应用中，我们使用appRoutes代替routes作为密钥。我认为这是你在使用木偶时应该这样做的方式。

接下来，您应该确保使用Backbone.history.start()启动Backbone.history。

Backbone Marionette路由 - 只有第一条路线有效

1 个答案: