CODEWITHSUNDEEP
cordovawebkitember.js
mattwallace
mattwallace

Reputation: 4222

Why would EmberJS not render in my HTML / Handlebars on webkit browsers

I have a really basic EmberJS application started that I want to use within a phonegap application. The following code works great in FF 4 but in Chrome and Safari the view is not updated in the handlebars section.

The Main JS file has the following code.

(function(window) {
  function Main() {
    MainApp = Ember.Application.create({
      appname: "My App",
      ready: function() {
        console.log("hello from ember");
        app.initialize();
        app.deviceready();
      }
    });
  }
  window.Main = Main;
}(window))

I found that if I removed the self executing function it will render just fine in webkit

MainApp = Ember.Application.create({
  appname: "My App",
  ready: function() {
    console.log("hello from ember");
    app.initialize();
    app.deviceready();
  }
});

So I guess the real question is why does wrapping Ember.Application.create() into a Main() function cause this issue in webkit ?

In my index.html file I have the following script block to execute main.js

<script type="text/javascript">
  function init() {
    var mainApp = new Main();
  }
</script>

Then my handlebars code looks like so.

<script type="text/x-handlebars">
  <h1>hello from {{MainApp.appname}}</h1>
</script>

Upvotes: 0

Views: 599

Answers (1)

kylekellogg
kylekellogg

Reputation: 26

The solution would be to take

(function(window) {
  function Main() {
    MainApp = Ember.Application.create({
      appname: "My App",
      ready: function() {
        console.log("hello from ember");
        app.initialize();
        app.deviceready();
      }
    });
  }
  window.Main = Main;
}(window))

and make it

(function(window) {
  MainApp = Ember.Application.create({
    appname: "My App",
    ready: function() {
      console.log("hello from ember");
      app.initialize();
      app.deviceready();
    }
  });
})(window)

This will still assign MainApp to window/global context as you wanted, but removes the dependency of the uninitialized function. I'm not sure how you were calling the init() function in your HTML, but it seems as though it was never actually initializing a new Main() object for you.

Upvotes: 1

Related Questions