Блок-помощник с ember-cli

Я пытаюсь сделать простой вспомогательный блок, но не могу найти документацию для ember-cli по этому вопросу.

ОБНОВЛЕНО

Вот помощник:

import Ember from 'ember';

export default function uiInput(options) {
  return new Handlebars.SafeString(
    '<div class="ui input">'
    + options.fn(this)
    + '</div>');
}

И в шаблоне:

{{#ui-input}}
  TEST
{{/ui-input}}

И вывод должен быть:

<div class="ui input">
  TEST
</div>

Но результат, который я получаю:

TEST
<div class="ui input">
  undefined
</div>

Что я делаю не так?


handlebars.js ember.js ember-cli
person slightlytyler    schedule 19.12.2014    source источник
comment
Есть ли причина, по которой он должен быть помощником? Кажется, то, что вы делаете, лучше подходит для компонента.   -  person Peter Brown    schedule 21.12.2014
comment
Может быть, но это упрощенная версия моей реальной проблемы. Тем не менее, я думаю, что бывают ситуации, когда блок-помощник является ответом, и я хотел бы знать, как его сделать. Только что обновил вопрос новыми подробностями   -  person slightlytyler    schedule 22.12.2014

Ответы (2)


arrow_upward
2
arrow_downward

Оригинальный ответ (см. Ниже способ Ember)

Сначала я хочу попытаться объяснить, что здесь происходит: Ember (в настоящее время 1.9.1) уже довольно давно не возвращает обработанные шаблоны в виде строк при прямом вызове options.fn (несмотря на все примеры кода, которые полагаются на это). поведение). Вместо этого ваш контент визуализирует «сам себя», что означает, что он использует функцию options.data.view appendChild, чтобы поместить вещи туда, где они должны быть. Вы можете увидеть это в действии, например. следуя коду помощника with до строки 81 в ember-handlebars/lib/helpers/binding.js. Вы также можете найти предыдущее обсуждение этого в этом нить.

Итак, что вы можете с этим поделать? Нам нужно создать собственное представление, чтобы позаботиться о том, что нам нужно. Следующий код работает для меня, используя ember-cli. В app/helpers/ui-input:

import Ember from 'ember';

var UiInputView = Ember.View.extend({
    classNames: ['ui', 'input']
});

export default function(options) {
    var view = options.data.view;
    var viewOptions = {
        shouldDisplayFunc: function() {return true;},
        template: options.fn,
        inverseTemplate: options.inverse,
        isEscaped: !options.hash.unescaped,
        templateData: options.data,
        templateHash: options.hash,
        helperName: 'block-helper'
    };
    var childView = view.createChildView(UiInputView, viewOptions);
    view.appendChild(childView);
}

Возможно, не все параметры просмотра необходимы...

Надеюсь, это поможет.

Обновление: способ Ember

Когда я пришел сюда, чтобы ответить на этот вопрос, я был упрямо настроен на то, чтобы уметь писать собственные хелперы. Я мало знал о {{yield}} помощник. Таким образом, правильный код будет выглядеть так:

Составная часть:

// app/components/ui-input.js
import Ember from 'ember';
export default Ember.Component.extend({
    classNames: ['ui', 'input']
});

Шаблон:

{{!-- app/templates/components/ui-input.hbs --}}
{{yield}}

Использование:

{{#ui-input}}
    Test
{{/ui-input}}
person suluke    schedule 16.01.2015
comment
Отмечаю вас как правильный ответ для подробного объяснения. Реальный вывод заключается в том, что помощники блоков больше не поддерживаются, и вместо них следует использовать компонент. - person slightlytyler; 19.01.2015
comment
Спасибо, что отметили мой ответ как правильный. Я думаю, вы также правы, говоря, что это на самом деле не поддерживается. В противном случае у них были бы документы для этого. Тем не менее, я все еще нахожу это разочаровывающим, так как я все время работаю с вспомогательными блоками на стороне сервера, и они существуют в htmlbars, так почему бы не сделать их расширяемыми? github.com/emberjs/rfcs/blob/master/ active/0002-block-params.md также предполагает, что они должны быть в будущем. - person suluke; 20.01.2015

arrow_upward
0
arrow_downward

У меня ember-cli 0.1.4. Когда я пробую ваш помощник в стиле пользовательского интерфейса в блочной нотации:

{{#ui-input}}
  TEST
{{/ui-input}}

я получаю ошибку javascript в консоли, говорящую это:

Assertion failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.

однако это работает для меня с небольшой настройкой вашего помощника:

помощник:

import Ember from 'ember';

export default function uiInput(input) {
  return new Handlebars.SafeString(
    '<div class="ui input">'
    + input
    + '</div>');
}

шаблон:

{{ui-input 'TEST'}}

получение этого вывода:

<div class="ui input">
  TEST
</div>
person benzo    schedule 22.12.2014
comment
Это работает, но мне нужно, чтобы помощник был в блочной записи. - person slightlytyler; 22.12.2014