如何使用服务器生成的内容链接到特定的rails API路由？ [英] How to link-to a specific rails API route with server-generated content in ember?

问题描述

我有一个混合的Ember / Rails应用程序与API名称空间中的Rails路由，以执行任何单个事件并将其转换为 .ics 文件导入用户的日历（a 此问题）。 Ember正在运行命令 ember server --proxy http：// localhost：3000 ，它将其连接到Rails服务器进程。

下面的代码段说明了我的设置：

Rails routes.rb snippet：

 命名空间：api do 
＃snip 
资源：事件
＃snip 
获取'export_event_ical'，on：：member 
 end 
 end 
  

Rails events_controller.rb 片段：

  def export_event_ical 
 @event = Event.find（params [：id]）
 @calendar = Icalendar :: Calendar.new 
 ical_event = Icalendar :: Event.new 
 ical_event.dtstart = @ event.start.strftime ％Y％m％dT％H％M％S）
 ical_event.dtend = @ event.start.strftime（％Y％m％dT％H％M％S）
 ical_event .summary = @ event.body.truncate（50）
 ical_event.description = @ event.body 
＃event.location = @ event.location 
 @ calendar.add_even t ical_event 
 @ calendar.publish 
 headers ['Content-Type'] =text / calendar; charset = UTF-8
 render：text => @ calendar.to_ical 
 end 
  

所以，例如，在我的Ember / Handlebars索引模板中，如果我有一个引用单个事件的事件参数，我可以使用< a href =http：// localhost：3000 / api / events / {{event.id}} / export_event_ical>导出到iCal< / a> 以达到API路由Rails正在提供（即，在4200端口上跳过Ember，并在3000上与Rails通话）。

到目前为止这样好。一个动态的Ember控制的链接，通过Ember路由到Rails？

我尝试了一些不起作用的事情：

• 添加路由到Ember 事件资源（路由器.js ）：

    this.resource（'events'，function（）{
   this.route（'show'，{path：'：event_id'}）; 
   this.route（'export_to_ical'，{
   path：'/ api / events /：event_id / export_event_ical'
  }）; 
  }）; 
    




• 将一些goofball jQuery添加到 events.js 路由作为按钮操作，并使用我的模板中的< button {{action'exportToICal'event.id}}>导出到iCal< / button> ：

  
  
  

  从ember导入Ember;

   导出默认值.Route.extend（{
   actions：{
   exportToICal：function（eventID）{
   $ .get（'/ api / events /'+ eventID +'/ export_event_ical'，
   function（）{
   alert（'Got here。'）; 
  }）; 
  } 
  } 
  }）; 
    




• 阅读一些文档：

  
  
  
  
  
  • http://guides.emberjs.com/v1.10.0/components/sending-actions-from-components-to-your-application
  
  
  • EmberJS - 如何使用linkTo动态生成链接
  
  

您如何在Ember中执行此操作？

解决方案

在我的应用程序中，我使用环境来声明服务器端点，如下所示：

  / * jshint node：true * / 
'use strict'; 
 
 var extend = require（'util'）._ extends; 
 
 module.exports = function（environment，appConfig）{
 var ENV = extend（appConfig，{
 EmberENV：{
 FEATURES：{
 / /在这里，您可以启用一个ember金丝雀的实验功能，建立
 // eg'with-controller'：true 
} 
}，
 
 APP：{
 //在这里，您可以将标志/选项传递给应用程序实例
 //创建时
}，
}）; 
 
 if（environment ==='development'）{
 ENV.serverHost ='http：// localhost：3000'; 
} 
 
返回ENV; 
}; 
  

然后你可以抓住这样的价值

  var config = this.container.lookup（'config：environment'）; 
 var url = config.serverHost +/ ...; 
  

I have a mixed Ember/Rails app with a Rails route in the API namespace to take any single Event and convert it to an .ics file for import into a user's calendar (a la this question). Ember is running with the command ember server --proxy http://localhost:3000, which is connecting it to the Rails server process.

The below snippets illustrate my setup:

Rails routes.rb snippet:

namespace :api do
  # snip
  resources :events do
  # snip
      get 'export_event_ical', on: :member
  end
end

Rails events_controller.rb snippet:

def export_event_ical
    @event = Event.find(params[:id])
    @calendar = Icalendar::Calendar.new
    ical_event = Icalendar::Event.new
    ical_event.dtstart = @event.start.strftime("%Y%m%dT%H%M%S")
    ical_event.dtend = @event.start.strftime("%Y%m%dT%H%M%S")
    ical_event.summary = @event.body.truncate(50)
    ical_event.description = @event.body
    # event.location = @event.location
    @calendar.add_event ical_event
    @calendar.publish
    headers['Content-Type'] = "text/calendar; charset=UTF-8"
    render :text => @calendar.to_ical
end

So, for example, in my Ember/Handlebars index template, if I have an event parameter that references a single Event, I can use <a href="http://localhost:3000/api/events/{{ event.id }}/export_event_ical">Export to iCal</a> to reach the API route that Rails is providing (i.e., skipping Ember on port 4200 and talking to Rails at 3000).

So far so good. But how do I make this into a dynamic Ember-controlled link that is routed through Ember to Rails?

I've tried a few things that don't work:

• Adding a route to the Ember events resource (router.js):

  this.resource('events', function() {
    this.route('show', {path: ':event_id'});
    this.route('export_to_ical', {
      path: '/api/events/:event_id/export_event_ical'
    });
  });
  

• Adding some goofball jQuery to the events.js route as a button action and using <button {{action 'exportToICal' event.id}}>Export to iCal</button> in my template:

  import Ember from 'ember';

  export default Ember.Route.extend({
    actions: {
      exportToICal: function(eventID) {
        $.get('/api/events/' + eventID + '/export_event_ical',
              function(){
                alert('Got here.');
              }); 
      }
    }
  });
  

• Reading some docs:

  • http://guides.emberjs.com/v1.10.0/components/sending-actions-from-components-to-your-application
  • EmberJS - How to dynamically generate link with linkTo?

How are you supposed to do this in Ember?

解决方案

In my app I use the environment to declare server endpoints, sort of like in rails, at the bottom:

/* jshint node: true */
'use strict';

var extend = require('util')._extend;

module.exports = function(environment, appConfig) {
  var ENV = extend(appConfig, {
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },
  });

  if (environment === 'development') {
    ENV.serverHost = 'http://localhost:3000';
  }

  return ENV;
};

Then you can grab the value like this

var config = this.container.lookup('config:environment');
var url = config.serverHost + "/...";

这篇关于如何使用服务器生成的内容链接到特定的rails API路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！