Question

我正在开展一个项目，我想从另一个网站加载Ember.js应用程序，托管在不同的服务器上并使用不同的域名。换句话说，我想在其他网站中加入一个Ember应用程序，就像我使用iFrame一样，但没有iFrame。

我使用Yeoman和Ember生成器构建了我的Ember.js应用程序。

在原始网站上，我只有一个简单的标记：

<body>
    <h1>My website</h1>
    <p>Lorem ipsum...</p>
    <div id="myEmberApp"></div>
    <p>Lorem ipsum...</p>
</body>

我知道如何调用外部JS文件，但是从这里不知道如何执行或加载我的Ember.js应用程序。我也尝试过使用CORS，但我认为它不符合我的需求。

对于记录，我不能使用iFrame。在原始网站上，我不想对jQuery或其他什么依赖。在未来，我希望能够逐步提供在任何网站上集成此应用程序的方法。

有什么解决方案吗？或者我是否应该计划在没有Ember.js的情况下在完整的JS中执行我的应用程序？

如果您需要更多信息，请与我们联系。

提前致谢

---编辑---

以下是我如何从原始网站调用我的JS文件：

<!-- The JS script to be included by the client -->  
<script>

  (function () {
    var eh = document.createElement('script');
    eh.type = 'text/javascript';
    eh.async = true;
    eh.src = '//localhost:9000/scripts/edenhome.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(eh, s)
  })();
</script>

我希望这会有所帮助。

Answer 1

也许我错过了什么，但为什么不把你的应用程序包含在脚本标签中呢？我不熟悉yeoman生成器，但是大多数这些构建工具都会使用预编译到JavaScript函数中的模板启动一个ember应用程序，然后将所有文件连接在一起放在一个文件中。

例如：

// this would be the precompiler output generated by yeoman, not exactly like
// this, but same idea, the template is part of the JS file
Ember.TEMPLATES['application'] = Ember.Handlebars.compile('<h1>I am an ember app</h1>');

// make an app and set the rootElement
var App = Ember.Application.create({
  rootElement: '#myEmberApp'
});

你可以在这里看到我正在加载来自不同域的ember应用程序：

http://emberjs.jsbin.com/mawuv/1/edit

编辑跟进

注入脚本的工作方式与具有src属性的脚本一样：

http://emberjs.jsbin.com/mawuv/2/

Answer 2

我建议如下，

免责声明：我实际上没有尝试过您所要求的内容，但我通常会从单独的文件中加载所有内容，但是在同一个域的上下文中。

创建一个加载所有模板的函数，并将它们附加到文档中。
创建一个运行完整ember.js应用程序的函数。
创建将被远程站点引用的文件，并将搜索特定元素（这也可以是参数化/是jquery插件等），并且一旦发现从加载所有模板调用函数（ 1）并从（2）启动应用程序调用函数，其中rootElement是前面提到的特定元素。 （在之前的任何加载之前，应该加载ember.js应用程序的所有依赖项，例如jquery，handlebars.js，ember.js等，可能处于无冲突状态）
应使用jsonp对来自ember应用的服务器的所有ajax请求执行。

简化示例，

http://emberjs.jsbin.com/nelosese/1/edit

<强> JS

/*it is possible to load templates from independent files, using promises, however here it is just demonstrated the loading of templates*/
/*a callback is added since they are loaded async and only when this is done should the app complete initialization */
function initTemplates(callback){
  var templates ='<script type="text/x-handlebars"><h2> Welcome to Ember.js</h2>{{outlet}}</script><script type="text/x-handlebars" data-template-name="index"><ul>{{#each item in model}}<li>{{item}}</li>{{/each}}</ul></script>';
  $('body').append(templates);
  callback();
}

function initApp(){
  App = Ember.Application.create({
    rootElement: '#myEmberApp'
  });
  App.Router.map(function() {});

App.IndexRoute = Ember.Route.extend({model: function() {
    return ['red', 'yellow', 'blue'];
  }
});
}

/*a reference to your bootstrap script, that executes the following*/

$(document).ready(function(){

if($('#myEmberApp').length>0){
      $.get("/",function(){initTemplates(function(){
        initApp();
      });});

}

});

<强> HTML

<body>
  <div id="myEmberApp"></div>

</body>

从其他网站加载Ember.js应用程序

2 个答案: