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

Question

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?

Answer 1

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();
  }
});