Test HTMLBars in Ember.js Canary

1

Howdy friends! Ember.js 1.10 will branch into beta in about a week.

The HTMLBars templating engine is in master now, behind a feature flag. In order to catch more issues before beta (and to give us a better understanding of if the feature can move forward), I’d like to ask a favor.

Follow @rwjblue’s guide on testing HTMLBars in your Ember app, and open an issue if anything seems awry. Seeing how well the code works in real-world apps is super important! There is no new syntax behind the feature flag, but existing code should Just Work.

And while you’re on master, check out two other new features:

  • Block params (ember-htmlbars-block-params). Ember components can now yield values to an their block context. This provides an important escape valve for strict component encapsulation. Read about it in the rfc, and the pull requests.
  • Inline if for HTMLBars templates (ember-htmlbars-inline-if-helper). Like so: {{if isAuthenticated 'Hello user!'}} This is of limited utility now, but once we get the new HTMLBars attribute syntax merged you will see used with class and other attributes.

Thanks for your review! I hope you are as excited to try this as those of us working on it are to see it ship :smile:

9 Likes
2

I’m feeling super positive about Ember lately, really exciting to see all this stuff that’s been talked about for so long start making it into beta – can’t wait to try this out.

3

We are using ember-template-compiler as part of our build chain so I can’t follow along with the instructions @rwjblue 's guide. We pretty much live on canary so can give me some direction on how to get htmlbars enabled?

4

Started testing https://github.com/broerse/ember-cli-blog/tree/htmlbars. It is not working yet. There is some strange Ember-Pouch error but perhaps that is more canary related. Should it work without fixing DEPRECATION: Usage of Ember.Handlebars.helper is deprecated. Please use Ember.HTMLBars.helper. ??

1 Like
5

Yes, we have an emulation mode for custom helpers so that Ember.Handlebars.helper should work.

6

OK I will search for this bug. The error seems to be in Ember-Pouch

findAll: function(store, type /*, sinceToken */) {
    // TODO: use sinceToken
    this._init(type);
    return this.db.rel.find(type.typeKey);
  },
7

I probably wasn’t clear about how we precompile in my previous post, ember-template-compiler - npm is the npm package we use.

I get an error ‘template must be a function. Did you mean to call Ember.Handlebars.compile(“…”) or specify templateName instead?’

8

I worked through the ember-cli-htmlbars source and got it working with our playframework precompiler.

9

I’ve got a super simple Ember app that I wanted to try with the latest and greatest. I followed the directions in the article and when I try and run I get an error:

Error while processing route: competitions.index undefined is not an object (evaluating ‘this.fixturesForType’) findAll@http://localhost:4200/assets/vendor.js:80262:28

It’s a very simple app using some fixtures to start. I’m guessing there was some change for fixtures in a recent update to Ember?

Thanks.

10

Yes, there have been changes in Ember Data regarding fixtures (although I am not 100% sure what they are).

11

Awesome, thanks for working through it! Once we go to beta, I’ll likely make ember-template-compiler itself do the work that ember-cli-htmlbars is doing (for the precompilation not the Broccoli plugin + ember-cli addon bits).

12

Is it possible to test this out using Emblem? So far, I have had no luck.

13

@johanobergman Emblem is a community project. I’m not aware of any work done on it to support HTMLBars thus far.

14

@mixonic I read that it should be pretty straightforward https://github.com/machty/emblem.js/issues/139. Maybe @machty has an update on this?

You are doing a great job, all of you, and I don’t want to sound impatient. It’s just so exciting!

15

Well I fixed that problem by updating the version of Ember Data I was using to the latest beta. It’s working, but now there’s a warning in the console:

You’re attempting to render a view by passing dataSourceBinding to a view helper without a quoted value, but this syntax is ambiguous. You should either surround dataSourceBinding’s value in quotes or remove Binding from dataSourceBinding.

I got nothing… :wink:

16

Awesome, thanks for testing, can you create an issue for this invalid warning? It is caused by a recent refactor I did to the {{each}} helper. I should be able to fix it pretty quickly, but I don’t want to loose track of the problem.

17

@johnt519 please open an issue!

18

Will do, as soon as I get back to my system :slight_smile:

19

Well, it seems to have been fixed… I did a bower update and I’m not seeing the warning anymore.

This is my current config:

[Debug] DEBUG: Ember      : 1.10.0-beta.1+canary.3fd1a25c (vendor.js, line 17456)
[Debug] DEBUG: Ember Data : 1.0.0-beta.12 (vendor.js, line 17456)
[Debug] DEBUG: Handlebars : 2.0.0 (vendor.js, line 17456)
[Debug] DEBUG: jQuery     : 1.11.1 (vendor.js, line 17456)
20

Yep. Fixed it an hour or so ago, thanks for reporting.