How to use MarionetteJS to consume Api calls.

问题

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();

回答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

回答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");
    }
});

回答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();

来源：https://stackoverflow.com/questions/24018350/how-to-use-marionettejs-to-consume-api-calls

标签

ajax

backbone.js

marionette