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

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

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>

Full example

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

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

2 个答案: