How to use MarionetteJS to consume Api calls.

Question

How do you only use parts of API call that you want in Marionette.js Using code below:

/messages returns JSON:

messages.foo
messages.read
messages.friend
messages.following

How can I create three different view for 3 different regions using Marionette View model based on one fetch. (It would be nice to have read/unread in one view)

var MessageModel = Backbone.Model.extend({
        urlRoot: '/messages',
    });

    var MessageCollection = Backbone.Collection.extend({
        url: '/messages',
        model: MessageModel,
    });

    var messages = new MessageCollection();
    messages.fetch();

Peradventure

I don't really understand your question Merlin. Can you explain further what you mean by only use parts of API call? – Isabellaisabelle

Sure, messages has five children, I only want three. – Peradventure

You can use parse function on the model or collection take what you need and push rest of the messages somewhere else ( maybe with trigger) or discard them. – Circassian

What MikeWu said is probably the most correct way to do what you want. You can also just filter the models loaded into your MessageCollection and pass them into a new instance of that collection. – Isabellaisabelle

I saw the twitter example in docs. and samples on SO. first time going through this, so, asking alot of q's.. Have started with parse method whats the filter method.. – Peradventure

Answer 1

So I think what you want here is a Controller. A Controller can act as a middleman between your views and your entities (ie, Models & Collections).

Instead of calling the view directly, you call the controller, which fetches the entity and when done, instantiates the appropriate view.

Here's an example:

var MyView = Marionette.View.extend({
  // ... view options
});

var MyCollection = Backbone.Collection.extend({
  // ... 
});

var MyController = Marionette.Controller.extend({
  initialize: function(options) {
    var self = this;

    this.entity = options.entity;
    this.region = options.region; 

    this.entity.fetch({
        success: function() {
            self.showBaseView();
        }
    });
  },

  getBaseView: function() {
    return new MyView({ collection: this.entity });
  },

  showBaseView: function() {
    this.region.show(this.getBaseView());
  }

});


var controller = new MyController({
  entity: new MyCollection(),
  region: App.mainRegion
});

While this only uses one view and one region, you can have this configured however you need to depending on your app. The principle of it is that the Controller acts as an entry point that processes all the dependencies you need to render your multiple views/regions using one entity.

You can see a very simple example of this here: https://github.com/tnbKristi/kristi-yo/blob/master/app/scripts/modules/home/components/skills/skills-controller.js

Deckhand

Answer 2

This is Ref Link is Below http://www.codeproject.com/Articles/698645/A-Beginners-Guide-for-Creating-Single-Page-Applica

  var book = new Book({BookName: "Backbone Book 1"});
book.save({}, {
    success: function (model, respose, options) {
        console.log("The model has been saved to the server");
    },
    error: function (model, xhr, options) {
        console.log("Something went wrong while saving the model");
    }
});

Unsnap

Answer 3

pIf I understand your question correctly, the code bellow could help using parse function. parse is called by Backbone whenever a collection's models are returned by the server, in fetch. The function is passed the raw response object, and should return the array of model attributes to be added to the collection. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.

var MessageModel = Backbone.Model.extend({
    urlRoot: '/messages',
});

var MessageCollection = Backbone.Collection.extend({
    url: '/messages',
    model: MessageModel,
    parse:function(response){
        // here you can manipulate your collection value depending on the response
        var myFilteredData = [];
        myFilteredData = myFilteredData.push(response.foo);
        myFilteredData = myFilteredData.concat(response.followings);
        // or whatever you need
        return myFilteredData;
    }
});

var messages = new MessageCollection();
messages.fetch();

Zamia

Since the data is pulled once. Is there anyway to create state and then pass the parsed data to specific views. – Peradventure