如何使用MarionetteJS消耗API调用。 [英] How to use MarionetteJS to consume Api calls.

查看:496
本文介绍了如何使用MarionetteJS消耗API调用。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你如何只使用要在Marionette.js API调用的部分 下面使用code:

/邮件返回JSON:

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

我怎样才能创建三个不同的视图使用木偶查看基于一个取模型的3个不同的区域。 (这将是不错的读/未读,在一个视图)

  VAR MessageModel = Backbone.Model.extend({
        urlRoot:/邮件,
    });

    VAR MessageCollection = Backbone.Collection.extend({
        网址:/邮件,
        型号:MessageModel,
    });

    VAR消息=新MessageCollection();
    messages.fetch();
 

解决方案

所以,我想你想要的这里是一个控制器。控制器可以充当你的意见,你的实体(即模型和放大器;集合)之间的中间人。

不是直接调用视图的

,你叫控制器,它获取的实体完成后,实例化相应的视图。

下面是一个例子:

  VAR MyView的= Marionette.View.extend({
  // ...查看选项
});

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

VAR = myController的Marionette.Controller.extend({
  初始化:功能(选件){
    无功自我=这一点;

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

    this.entity.fetch({
        成功:函数(){
            self.showBaseView();
        }
    });
  },

  getBaseView:函数(){
    返回新的MyView的({集:this.entity});
  },

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

});


无功控制=新myController的({
  单位:新MyCollection的()
  区域:App.mainRegion
});
 

虽然这仅使用一个视图和一个区域,你可以然而,这配置,你需要根据你的应用程序。它的原理是控制器/使用一个实体的区域作为一个处理所有你需要渲染多个视图依赖一个入口点。

您可以看到这个在这里一个很简单的例子:<一href="https://github.com/tnbKristi/kristi-yo/blob/master/app/scripts/modules/home/components/skills/skills-controller.js" rel="nofollow">https://github.com/tnbKristi/kristi-yo/blob/master/app/scripts/modules/home/components/skills/skills-controller.js

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

解决方案

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

这篇关于如何使用MarionetteJS消耗API调用。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆