javascript - 基于模型类型的 ember 组件

Question

我知道这有点重复，但我创建动态组件渲染器的所有努力都可能失败，因为我对 ember 概念缺乏了解。

My Scenario 是一个多用途搜索栏，它将在缓存中搜索模型。我希望每个搜索结果都根据模型的类型键呈现在搜索输入下方。 Handlebars 文件将根据模型类型命名，语法为 components/app-search-<model-type-key>.hbs例如客户模型的模板名称应为 components/app-search-customer.hbs

我的搜索模板如下所示:

<div class="well well-md">
    <div class="input-group">
        {{input value=searchTerm class="form-control"}}
    </div>
    {{#if searchTerm}} <!-- Updating searchTerm causes results to populate with models -->
    {{#if results.length}}
    <ul class="list-group search-results">
        {{#each result in results}}
            <!-- todo -->
            {{renderSearchComponent model=result}}
        {{/each}}
    </ul>
    {{else}}
        Nothing here Captain
    {{/if}}
    {{/if}}
</div>

我对 renderSearchComponent 助手的尝试如下所示:

Ember.Handlebars.registerHelper('renderSearchComponent', function(model, options) {
    var modelType = options.model.constructor.typeKey,
        componentPath,
        component,
        helper;
    if (typeof modelType === 'undefined') {
        componentPath = "app-search-default";
    } else {
        componentPath = "app-search-" + modelType;
    }
    component = Ember.Handlebars.get(this, componentPath, options),
    helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);
    helper.call(this, options);
});

当运行 options.model 抛出:TypeError: options.model is undefined另外我有以下错误:

Error: Assertion Failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications.

我一直在眨眼，现在似乎已经好几个小时了，试图把这件事做好。我所要求的是否可能？

提前谢谢你。

Answer 1

我知道这是一个古老的问题，但是 Ember since version 1.11+有新的 component helper动态呈现组件。

{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
{{/each}}