5

我希望能够在 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();
    }
});

我希望能够在一堆不同的路由中使用这个组件，并且我不想为了给信息框提供它的模型而必须引用特定信息框所在的路由，是这样吗？可能，还是应该使用其他功能，例如常规模板和渲染助手？

4

2 回答 2

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>

完整示例

于 2013-08-22T17:56:49.847 回答
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();
  }
});
于 2013-08-22T19:02:18.943 回答