htmlbars

I have a set of buttons whose state I wish to toggle with a class active . If I had a single button, then I would bind the active class to a controller property and toggle that property in the click handler: <button {{action 'toggle'}} class="{{active}}">model.title</button> actions: { toggle: function() { this.set('active', true); } } But I have multiple buttons, so I am not sure what I can bind. It would be useful if I could pass a reference to the clicked button to the action handler, but I'm not sure how to do this. {{#each item in model}} <button {{action 'toggle' referenceToButton}}

I'm trying to write a component integration test, a la this blog post , but my component has a link-to to a dynamic route and the href property isn't being filled in. Here is a simplified version of what I'm trying to do. My component's template: {{#link-to "myModel" model}} And here is the relevant part of my test: this.set('model', { id: 'myId', name: 'My Name' }); this.render(hbs` {{my-component model=model}} `); assert.equal(this.$('a').attr('href'), '/myModel/myId'); // fails The link-to is rendered, just without an href attribute. If I log the HTML in the test, it looks like: <a id=

I was using custom Handlebars helper extending the functionality of 'if' block. In Ember 1.10 this doesnt work anymore as there is no Ember.Handlebars.bind property which allowed binding to the property.... Ember.Handlebars.registerHelper('ifCond', function (a, b, options) { return Ember.Handlebars.bind.call(options, contexts[0], a, options, true, function(result) { return result === b }); }); The usage would be: {{#ifCond property "value"}} {{some-other-component}} {{else}} something other... {{/ifCond}} but this returns an error "Cannot read property 'call' of undefined" Is there any way

The goal is to define a structure of HTML that has more than one block of content that is declared by the caller. For example, a header, body, and content. The resulting markup should be: <header>My header</header> <div class="body">My body</div> <footer>My footer</footer> The template instantiating the component would define each of the three sections, My header , My body , and My footer . With Ruby on Rails, you would use content_for :header to capture the header content from the caller, and yield :header to interpolate it. Is this possible in ember.js? As of ember v1.10, yield accepts

I need to combine linkTo and action helpers in Ember.js. My code is: {{#link-to 'index'}}<span {{action 'clear'}}>Clear</span>{{/link-to}} But I would like to make this something like this: {{#link-to 'index' {{action 'clear'}} }}Clear{{/link-to}} And also: <li> {{#link-to 'support'}} <span {{action 'myAction' 'support'}}>Support</span> {{/link-to}} </li> To: <li> {{#link-to 'support' {{action 'myAction' 'support'}} }}Support{{/link-to}} </li> How can I achieve this? Solution Check my answer for Ember 2.0 compatible , OK for SEO solution . Ember Link Action addon This is OK for SEO solution !

I want to dynamically compile (and then render) a HTMLBars template at runtime, on the client in Ember. How can I do this? Since Ember 2.10 is now using Glimmer, things might be a bit tricky here. In order to compile a template, you need to include ember-template-compiler.js to your application. I'd recommend using ember-browserify and ember-source . In your controller, import the compiler as the following. import Ember from 'ember'; import Compiler from 'npm:ember-source/dist/ember-template-compiler'; export default Ember.Controller.extend({ compileContent() { const template = Compiler