ember组件基于模型类型 [英] ember component based on model type

问题描述

我知道这有点重复，但是我创建动态组件渲染器的所有努力都可能是由于我在缺乏概念上的缺乏知识。

我的场景是一个多用途搜索栏，它将搜索缓存中的模型。我希望每个搜索结果根据模型的类型键显示在搜索输入下方。将根据具有语法 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}}<！ - 更新searchTerm会导致结果填充模型 - > 
 {{#if results.length}} 
< ul class =list-group search-results> 
 {{#each result in results}} 
<！ -  todo  - > 
 {{renderSearchComponent model = result}} 
 {{/ each}} 
< / ul> 
 {{else}} 
这里没有任何东西
 {{/ 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 throws： TypeError：options.model未定义，另外我有以下错误：

 错误：断言失败：清空视图inBuffer状态是不允许的，不应该在正常情况下发生。很可能在您的应用程序中有一个错误。这可能是由于过多的财产变动通知。 
  

我一直在殴打我的眼皮，看起来几个小时现在试图得到这个权利。是我要求甚至可以吗？

提前谢谢。

解决方案>

我知道这是一年的问题，但是Ember 自1.11以上版本具有新的 component helper 以动态渲染组件。

  {{每个模型为| post |}} 
 {{！ -  foo-component or bar-component  - }} 
 {{component post.componentName post = post}} 
 {{/ each}} 
  

I know this is somewhat duplicated, but All my efforts to create a dynamic component renderer are failing possibly due to my lack of knowledge in ember concepts.

My Scenario is a multi purpose search bar which will search for models in the cache. I would like each search result to be rendered below the search input according to the model's type key. the handlebars file will be named according to the model type with the syntax components/app-search-<model-type-key>.hbs e.g. the template name for a customer model should be components/app-search-customer.hbs

my search template looks like this:

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

And my attempt at a renderSearchComponent helper looks like this:

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

When this runs the options.model throws: TypeError: options.model is undefined and additionally i have the following error:

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.

I have been batting my eyelids for what seems hours now trying to get this right. Is what I am asking for even possible?

Thank you in advance.

解决方案

I know this is a year old question, but Ember since version 1.11+ has the new component helper to dynamically render components.

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

这篇关于ember组件基于模型类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！