Question

I have a template that is iterating over an array of entities.

I would like to display a ‘delete’ button for some of these entities based on some logic and I’m just trying to understand the best way to do this.

The actual delete button would be rendered with the following markup, note that the markup includes a call to the built in action helper.:

<button class="btn btn-danger" {{action "removeEntityFunctionInController" entitity}}><i class="icon-remove icon-white"></i> Remove</button>

I’d like to replace this with

{{optionalRemoveEntityButton entity}}

I am trying to create a logicless template so I thought maybe I could create a helper like:

Ember.Handlebars.registerHelper('optionalRemoveEntityButton', function(entity, options) {
  logicForDeterminingWhetherToShowView 
  removeEntityButtonView = howDoILoadAViewProgrammatically?
  return removeEntityButtonView;
});

I don’t understand how to load the view programmatically. I’d like to use a view because this helper is not just returning some simple markup. It also includes a call to {{action}} helper.

Unless there is a better way to achieve what I’m trying to do?

Answer 1

I have a template that is iterating over an array of entities. I would like to display a ‘delete’ button for some of these entities based on some logic and I’m just trying to understand the best way to do this.

This is a pretty common use case. The idea place for this kind of logic is in the controller.

The actual delete button would be rendered with the following markup, note that the markup includes a call to the built in action helper.: <button class="btn btn-danger" {{action "removeEntityFunctionInController" entitity}}><i class="icon-remove icon-white"></i> Remove</button>

I’d like to replace this with {{optionalRemoveEntityButton entity}}

I’d recommend that you keep the original markup.

Unless there is a better way to achieve what I’m trying to do?

Keeping logic out of your templates is a good goal, but generally that does not mean building a lot of handlebars helpers. Typically you would only build a helper when you find some display logic that is being repeated in many views.

An alternative is to use the {{#if}} helper to conditionally display the button

{{#if showDeleteButton}}
  <button class="btn btn-danger" {{action "removeEntityFunctionInController" entitity}}><i class="icon-remove icon-white"></i> Remove</button>
{{/if}}

You’ll need to set itemController property of your ArrayController to the name of a controller (probably an ObjectController) that will wrap each individual item. Then define the showDeleteButton method on that itemController. See the Ember.ArrayController docs for detail on setting this up.