Углеродный компонент на основе типа модели

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 throws: 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}} 

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

Внутренние элементы помощника не заполнены документально, я думаю, потому что они не являются публичным API. Но вы можете принять вдохновение, посмотрев на helper source code.