基于模型类型的 ember 组件答案

【问题标题】：ember component based on model type基于模型类型的 ember 组件
【发布时间】：2014-04-24 04:08:47
【问题描述】：

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

My Scenario 是一个多用途搜索栏，它将在缓存中搜索模型。我希望根据模型的类型键在搜索输入下方呈现每个搜索结果。车把文件将根据模型类型命名，语法为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.

为了解决这个问题，我似乎已经花了好几个小时在打眼皮。我的要求有可能吗？

提前谢谢你。

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你走在正确的道路上，一个可行的例子可能是这样的：

import {handlebarsGet} from "ember-handlebars/ext";

Ember.Handlebars.registerHelper('renderSearchComponent', function(value, options) {

  var propertyValue;
  if (options) {

    if ( options.types[0] !== 'STRING' ) {
      var context = (options.contexts && options.contexts.length) ? options.contexts[0] : this;
      propertyValue = handlebarsGet(context, value, options);
      propertyValue = propertyValue.constructor.typeKey;
    } else {
      propertyValue = value;
    }

  } else {
    options = value;
    propertyValue = 'default';
  }

  var property = 'app-search-'+propertyValue;
  var helper = Ember.Handlebars.resolveHelper(options.data.view.container, property);
  if (helper) {
    return helper.call(this, options);
  }

});

此帮助器允许传递字符串、空值或绑定属性。

{{renderSearchComponent}}
{{renderSearchComponent 'book'}}
{{renderSearchComponent result}}

Helper 内部没有完整的文档记录，我认为是因为它们不是公共 API。但是您可以通过查看helper source code 来获得灵感。

【讨论】：