在许多不同的路由中使用的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();
    }
});

我希望能够在多个不同的路由中使用此组件，并且不必引用特定信息框所在的路由以便为该信息框提供模型。是否可能做到这一点？或者我应该使用其他功能，如常规模板和渲染助手？

- sherlock

---

从你的问题中并不清楚如何使用dataDef来获取模型。你能澄清一下吗？ - Mike Grassotti

@MikeGrassotti 我的意思是，我想说我将获得一个对象，我希望将其用作我的模型。我认为我不需要涉及我使用的（非常独特）API 的具体细节。我已更新我的问题，包括可能看起来像什么模型的示例。感谢你的帮助！ - sherlock

Answer 1

如果您想定义要使用的模型（如果该模型与当前上下文不同），则应使用渲染。 如果是相同的上下文，则应只使用部分。 您还可以生成助手并将模型传递给它。

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

使用方法：

  <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>

完整实例

- Kingpin2k

---

很酷，谢谢，我本来想问如何将参数（例如dataDef）放入渲染助手中，但我认为你的示例已经展示了这一点。 - sherlock

Answer 2

一旦您拥有了模型对象，只需在组件本身上设置属性即可：

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

- Mike Grassotti

---

这个解决方案看起来非常令人兴奋，但是这种方法对我似乎不起作用：http://jsbin.com/okiY/1/edit?html,js,output 谢谢！不过这个可以：http://jsbin.com/okiY/2/edit?html,js,output 太棒了！ - sherlock