CODEWITHSUNDEEP
ember.jshandlebars.js
bazzel
bazzel

Reputation: 833

Helper is wrapped in a script tag

This one must be very easy to answer, though I'm stuck...

I defined the following (simplified) helper to generate a url:

Ember.Handlebars.helper('imageUrl', function(basename) {
  return 'http://lorempixel.com/400/200/' + basename;
});

Calling this helper from a template:

<ul>
  {{#each}}
    <li><img src={{imageUrl name}}></li>
  {{/each}}
</ul>

Wraps the output in a script tag instead of outputting the expected url:

...
<li>
  <img src="<script" id="metamorph-6-start" type="text/x-placeholder">
  http://lorempixel.com/400/200/sport
  <script id="metamorph-6-end" type="text/x-placeholder"></script>&gt;

I don't want this property to be part of my model, so I solved this by representing each item with a controller and defined the imageUrl in this controller. But this feels too complicated:

<ul>
  {{#each itemController="myItem"}}
    <li><img {{bind-attr src=imageUrl}}></li>
  {{/each}}
</ul>


App.MyItemController = Em.ObjectController.extend({
  imageUrl: function(){
    return 'http://lorempixel.com/400/200/' + this.get('name');
  }.property('name');
});

How an I use a helper to accomplish this?

Upvotes: 1

Views: 180

Answers (1)

Edu
Edu

Reputation: 2520

I think you can use your helper unbounded

<ul>
  {{#each}}
    <li><img src={{unbound imageUrl name}}></li>
  {{/each}}
</ul>

from a merged PR in github https://github.com/emberjs/ember.js/pull/1817

Helpers declared as bound can be invoked by their unbound former via the unbound helper: {{unbound foo prop1 prop2}}

Upvotes: 1

Related Questions