is there an easy way to refresh a region in marionette?

Question

I cannot seem to find a way to refresh a region of the page. I have a drop down select option that has the ability to add a new item to that drop down through a modal dialog. I want to redraw that region of the page that has that select option with the new item in it. I can't seem to find a way to refresh that portion of the page in marionette or backbone. I know I could call

location.reload();

but I assume there is a better way. Thanks!

Answer 1

I would suggest creating a collection to hold your drop-down items, and then use a Marionette.CompositeView to render the drop-down.
You can then add items to the collection, and call the CompositeView.render() function.

Answer 2

You can try using show method of the region.

var Layout = Marionette.Layout.extends({ regions: {yourRegion : '#my-region-id'} });
var yourlayout = new Layout

On change of dropdown event, create a new view and render it inside the region with show method.

view = new Marionette.ItemView()
yourlayout.yourRegion.show(view)

Note: 1 region can render only one "view" at a time.Running show on the region will automatically close the previous view and render new view inside it.

Answer 3

For adding new item, use CollectionView or CompositeView and then add your new add in the collection.

  // Item view
ItemView = Backbone.Marionette.ItemView.extend({
  template: '#itemTemplate',
  // wrap the view with `tr` instead of `div`
  tagName: 'tr'
});

// Collection view
CollectionView = Backbone.Marionette.CollectionView.extend({
  // Specify the itemView to render each item
  itemView: ItemView,
  // wrap the view with `tbody` instead of `div`
  tagName: 'tbody'
});


var collection = new Backbone.Collection([{id: 1, name:'Joe'}, {id:2, name:'masan'}]);

var view = new CollectionView({
  collection: collection
});

When you want to add new item, add it to collection.

collection.add({id:3, name: 'kumar'});