Geek asks and answers

Download the Ember.js app from another website

I am working on a project where I would like to download the Ember.js application from another site hosted on a different server and using a different domain name. In other terms, I would like to enable the Ember application on another website, for example, I would do with an iFrame, but without an iFrame.

I built the Ember.js application using Yeoman and the Ember generator.

In the original website, I just have simple markup:

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

I know how to call an external JS file, but I don’t know how to execute or download the Ember.js application from here. I also tried with CORS, but I don't think this will suit my needs.

For recordings, I cannot use iFrame. On the source website, I don't want to have any dependencies on jQuery or anything else. In the future, I would like to offer a step-by-step guide on how to integrate this application into any websites.

Is there any solution? Or do I need to plan to make my application in full JS without Ember.js?

Let me know if you need more information.

Thanks in advance

--- Edit ---

This is how I call my JS file from the origin site:

<!-- 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>

Hope this helps.

+3
source share
2 answers

, - , script? yoman, ember , JavaScript, .

:

// 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

script , script src:

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

+1

:

: , , , .

  • , .

  • , ember.js.

  • , , ( / jQuery- ..) , (1) (2) rootElement , . ( ember.js, jquery, handlebars.js, ember.js .., , )

  • ajax ember 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>
0
source

More articles:


All Articles