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().

Digital TV Experience

I have some experience with a Samsung smart TV I will summarize here.

TV

I have access to analog TV signal, and I must tell you this is not what a digital TV was made for. It’s acceptable, but

• the image is not sharp, thanks to the low resolution
• the aspect ratio of the picture (aka picture size) changes among channels, or even between programs
• the TV tries to enhance the quality of the image (e.g. sharpens the edges at still images), and sometimes that can be annoying
• no electronic program guide (EPG)

I tried to receive DVB-T signal but I couldn’t. Just a few channels with long breaks in receiving. Though the image quality was wonderful and I got EPG.

Teletext

Teletext comes with the channels supporting this technology. It is the shadow of the analog era. Digital TVs try to enhance this technology:

• store pages in memory, no need to wait for paging
• more txt display modes

Don’t expect too much from this.

Multimedia

Digital TVs support a standard protocol (DLNA) for receiving multimedia streams from other devices. Just put the two devices onto the same subnet of your LAN (use the same router with cable or Wi-Fi) and the two devices will see each other. In my case I run a Samsung AllShare DLNA server on my desktop computer and

• I can select the movie I want to play from the TV’s menu
• I can start playing the movie on my TV pressing a button on my computer using AllShare or Windows Media Player.

Smartphones have the same capabilities. Moreover

• I can start playing a movie on the TV from my computer pressing a button on my smart phone
• I can control the TV from the smart phone as a TV remote (needs special app on your phone)

You can by a NAS with DLNA support and you will have an always online media server without noisy fans.

HDMI

Connecting a HDMI cable to the TV and the computer, means the computer’s desktop can be displayed on the TV, in excellent quality.

Even the sound can be redirected to the TV’s speakers or sound system. Just open the sound playback devices and set the TV as the default sound device.

If your TV supports HDMI Ethernet channel, you can use your TV as a(n Internet) router for multimedia device (blue-ray player etc.).

Smart features

I have access to a Samsung smart TV. It has an Internet browser and apps can be downloaded from a store. There are some useful apps like online radio and TV  channel guide, but the most useful app is the Internet browser. It has Flash support and loads most of the websites I tried to visit.

For better experience I suggest you to buy a wireless keyboard and mouse. There are multimedia keyboards combining these devices into a small device just like a game controller.