Component as a plugin


#1

I am interested in the new component and I want to gain some consensus on its intended use.

I’d previously played about with the {{control 'mycontrols/control model}} which worked nearly exactly the same way as the render helper in that it created a triple. With the new component, everything is wrapped up in the same class with the view being the context and the controller:

Ember.Component = Ember.View.extend({
  init: function() {
    this._super();
    this.set('context', this);
    this.set('controller', this);
  }
});

I have just started working on this tag builder control/component or whatever and I want this control to be possibly included multiple times in the same view. I was toying with the idea of using the render helper as I like the separation of control/view and I can use it multiple times on the same view. At the moment, all the logic in my plugin has ended up in the view which I plan to now refactor before going any further and I just noticed the component class in rc6. I have a couple of questions on its intended use.

First of all, if I wanted to know what the best approach would be to adding the template via a 3rd party plugin in. At the moment, my view looks like this:

EmberAutosuggest.AutoSuggestView = Ember.View.extend({
  defaultTemplate: precompileTemplate("<ul class='selections'>blah<\/ul"),
  //etc.

But for a component would the best way be do something like this?

Ember.TEMPLATES['controls/app-autosuggest'] =  precompileTemplate("<ul class='selections'>blah<\/ul");

My last question is, what is the best way of supplying bindings to the component? I need to supply a binding to the component from which the user will filter the autocomplete list from and a model property binding that the user can add the tags to.

If I am working with a view then I can do this

App.IndexView = Ember.View.extend({
  autosuggest: EmberAutosuggest.AutoSuggestView.extend({
    sourceBinding: 'controller',
    destinationBinding: 'tags'
  }),
});

But I am not sure what the best way would be of adding this binding information to a component.

Any suggestions at all welcome.


Component ecosystem. Plugin API?