Backbone марионеток маршрутизация - только первый маршрут работает

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 выполняются так, как они должны, вид просто кажется либо отделенным, либо вообще не отображаемым.

Что не так?

Edit: 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 в качестве ключа. Я думаю, именно так вы должны это делать, когда используете Marionette.

Дальше вы должны убедиться, что вы запускаете Backbone.history, используя Backbone.history.start().