Ember–Handlebars.helpers in Windows 8 Metro

I tried to use Ember.js Handlebars helper {{action}} in a Windows 8 Metro (Windows Store) application. The data marker attribute appeared, but the function was never called.

I managed to find the root cause: Ember.js uses jQuery.ready() for initialization.

Solution

Change

waitForDOMContentLoaded: function() {
    this.deferReadiness();

    var self = this;
    this.$().ready(function() {
      self.advanceReadiness();
    });
  },

to

waitForDOMContentLoaded: function() {
    this.deferReadiness();

    var self = this;
      
    WinJS.Application.addEventListener("ready", function () {
        self.advanceReadiness();
    });

  },

and comment out 2 lines as shown below:

advanceReadiness: function() {
    this._readinessDeferrals--;

    //if (this._readinessDeferrals === 0) {
      Ember.run.once(this, this.didBecomeReady);
    //}
  },

Now you will use the Metro infrastructure for events.

Handlebars and Ember templating in Window 8 Metro

Handlebars uses script blocks for template markup. E.g.

<script type="text/x-handlebars" data-template-name="say-hello">
      Hello, <b>{{MyApp.name}}</b>
</script>

Unfortunately the Metro JavaScript engine removes the data-template-name attribute from the script tag, so this method can’t be used for templating.

As JS files are available locally for execution, the template files can be stored in separate HTML files and can be parsed from code. The implementation is simple:

        

Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync(path).done(function(folder) {
    var search = folder.createFileQuery(Windows.Storage.Search.CommonFileQuery.orderByName);
                search.getFilesAsync().done(function (res) {
                        res.forEach(function (file) {
                                var template;
                                Windows.Storage.FileIO.readTextAsync(file).then(function(fileContent) {
                                       var template = Ember.Handlebars.compile(fileContent);
                                       Ember.TEMPLATES[file.displayName] = template;
[…]

I omitted the async promises from the code for readability, but the code won’t work without them.

The code above

1. reads all the files from a folder
   
2. compiles the template
   
3. stores the compiled template as an Ember template

Now Ember.js and Handlebars.js are fully functional, even Ember.View can be used with view.append().

Require JS with Win 8 Metro interface

Require.js works with Windows 8 Metro-style (Windows Store) applications.

Page scripts

There is a JavaScript file for each HTML page files. You cannot wrap this .js file into a require function. The page events (e.g. the ready event) won’t be called.

You can place a require call into the event handler function and that works.