CODEWITHSUNDEEP
ember.js
sherlock
sherlock

Reputation: 764

Define Model for Ember Component used in a bunch of different Routes?

I would like to be able to define the model for a component template inside the Ember.Component js instead of inside the route where the component is sitting. I have not seen any examples which are doing this...

Here I have my component template:

<script type="text/x-handlebars" id="components/info-box">
    <div class="infoBox box">
        <p>
            <label>
                {{preUnits}}
            </label>
            <span>
                {{value}}
            </span>
        </p>
    </div>
</script>

And here is how I am placing it inside one route template:

{{info-box title='Total Area' dataDef='buddhaData:DataGet/site/areaNum'}}

What I would like to do is use my relevant Ember.Component to do some stuff with the parameters of the info-box and then return a model for it. 

App.InfoBoxComponent = Ember.Component.extend({
    buildIt: function(){
        var container = $('#' + this.get('elementId') );
        var title = this.get('title');
        var preUnits = this.get('preUnits') || '';
        var dataDef = this.get('dataDef');

        // Do stuff with dataDef.

        var model = {
            preUnits: '$',
            value: 5000
        }

        // Hopefully return model somehow.

    },

    didInsertElement: function(){
        this.buildIt();
    }
});

I want to be able to use this component inside a bunch of different routes, and I do not want to have to refer to the route that a particular info-box is inside of in order to give the info-box its model, is this possible, or should I use some other feature, like a regular template and the render helper?

Upvotes: 5

Views: 6593

Answers (2)

Kingpin2k
Kingpin2k

Reputation: 47367

You should use render if you'd like to define which model you want to use (if the model is different than the current context). If it's the same context, you should just use partials. You could also generate helper and pass in the model to that.

Ember.Handlebars.helper('autocomplete', Ember.View.extend({
  templateName: 'controls/autocomplete',

  filteredList: function() {
    var list = this.get('list'),
        filter = this.get('filter');

    if (!filter) { return list; }

    return list.filter(function(item) {
      return item.name.indexOf(filter) !== -1;
    });
  }.property('list.[]', 'filter')
}));

Usage:

  <script type="text/x-handlebars" data-template-name="application">
    {{autocomplete list=list1}}
    {{autocomplete list=list2}}
  </script>

  <script type="text/x-handlebars" data-template-name="controls/autocomplete">
    <p>{{input type="text" value=view.filter}}</p>
    <ul>
    {{#each view.filteredList}}
      <li >{{name}}</li>  
    {{/each}}
    </ul>
  </script>

Full example

Upvotes: 1

Mike Grassotti
Mike Grassotti

Reputation: 19050

Once you have the model object, just set properties on the component itself:

App.InfoBoxComponent = Ember.Component.extend({
  buildIt: function(){
    var container = $('#' + this.get('elementId') );
    var title = this.get('title');
    var preUnits = this.get('preUnits') || '';
    var dataDef = this.get('dataDef');

    // Do stuff with dataDef.

    var model = {
        preUnits: '$',
        value: 5000
    }

    // Set component's preUnits and value properties directly
    this.setProperty('preUnits', model.preUnits);
    this.setProperty('value', model.value);

    // or
    this.setProperties(model);


    // Hopefully return model somehow.

  },

  didInsertElement: function(){
    this.buildIt();
  }
});

Upvotes: 1

Related Questions