3

我正在做一个项目，我想从另一个网站加载 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>

我希望这有帮助。

4

2 回答 2

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/

于 2014-02-21T14:47:18.143 回答
0

我建议以下，

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

  1. 创建一个加载所有模板并将它们附加到文档的函数。

  2. 创建一个运行完整 ember.js 应用程序的函数。

  3. 创建将由远程站点引用的文件，并将搜索特定元素（这也可以是参数化的/是一个 jquery 插件等），一旦找到，从(1)加载所有模板调用函数并启动应用程序调用函数(2)具有rootElement前面提到的特定元素。（在之前的任何加载之前，应加载 ember.js 应用程序的所有依赖项，例如 jquery、handlebars.js、ember.js 等，可能处于无冲突状态）

  4. 从 ember 应用程序到服务器的所有 ajax 请求都应该使用jsonp.

简化的例子，

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>
于 2014-02-21T10:49:16.707 回答