为一堆不同的路线中使用的Ember组件定义模型？

Question

我希望能够在Ember.Component js中定义组件模板的模型,而不是在组件所在的路径内.我还没有看到任何这样做的例子......

这里我有我的组件模板:

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

以下是我将它放在一个路径模板中的方法:

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

我想要做的是使用我的相关Ember.Component用信息框的参数做一些事情,然后为它返回一个模型.

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

我希望能够在一堆不同的路由中使用这个组件,我不想要引用特定信息框所在的路由,以便为信息框提供其模型,这是可能,还是应该使用其他功能,比如常规模板和渲染助手？

Answer 1

获得模型对象后，只需在组件本身上设置属性：

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