Search code examples
ember.jsember-clihtmlbars

Access view helper directly with Ember.Handlebars.helpers.view in ember 1.10.0


This code worked in ember 1.7.0:

 var ViewTemplateHelper = Ember.Handlebars.makeBoundHelper(function(templateString, options) {

  var dummy = Ember.View.extend({
    classNames: ['view-template'],
    template: Ember.Handlebars.compile(templateString)
  });

  var view = dummy.create();

  if (options && options.hash) {
    options.hash.content = template;
  }

  // Hack to prevent appendChild error
  if (options.data.view._state === 'inDOM') {
    options.data.view.rerender();
    options.data.view.renderToBuffer();
  }

  return Ember.Handlebars.helpers.view.call(this, view, options); // undefined is not a function
});

export
default ViewTemplateHelper;

But now in ember 1.10.0 is gives the undefined is not a function error.

I tried to use Ember.Handlebars.helpers.view.helperFunction.call.

What do I miss?


Solution

  • The solution for this problem was not in a helper, but to use a component instead.

    // components/content-element.js
    import Ember from 'ember';
    
    export
    default Ember.Component.extend({
      updateLayout: function() {
        var store = this.container.lookup('store:main');
        var projectId = this.get('project.id');
        store.find('contentElement', {
          key: this.get('key'),
          project_id: projectId
        }).then(function(contentElement) {
          if (!Ember.isEmpty(contentElement.get('firstObject.value'))) {
            var template = contentElement.get('firstObject.value');
            var compiled = Ember.Handlebars.compile(template);
            this.set('layout', compiled);
            this.rerender();
          }
        }.bind(this));
      }.observes('key').on('init')
    });
    

    We use the model contentElement for our templates. After setting the layout to the compiled Handlebars you have to run this.rerender();

    For components you have to bind all to be used variables like this:

    {{content-element key="name.of.element" project=project}}
    

    In this case we use project in our dynamic template so we bound it. The key is used to get the right contentElement from the store.