Как создать часть повторного использования для дублирования разметки в ember.js?

Question

Учитывая этот кусок HTML:

<div id="email_field" class="control-group"> 
    <label class="control-label" for="account.email">Email</label> 
    <div id="email_input" class="controls"> 
    <input id="account.email" name="account.email" type="text" placeholder="jpublic@example.com"> 
    <span class="help-block">We just need a valid email address.</span> 
    </div> 
</div> 

Как превратить это в многоразовом парциальном для любого атрибута я хочу? IE: адрес электронной почты, пароль, подтверждение пароля и т. Д.

Я бы предположил какую-то иерархию взглядов, но я не совсем уверен.

EDIT: После дальнейшего исследования я нокаутировал {{view}} и {{render}} и понял, что именно мне нужно:

Я хочу: 1. Используйте конкретный вид (InputView) 2. Используйте ({{view}} не делает этого, я думаю) 3. Уметь использовать это несколько раз ({{render}} не может это сделать) 4. Уметь передавать значения ({{render}} can ' t сделать это)

Пример:

<!-- templates/application.hbs --> 
{{foo "input" name="Email" id="account.email" placeholder="jpublic@email.com"}} 

---

// controllers/input.js 
Application.InputController = Ember.ObjectController.extend({ 
    type: "text" 
}); 

---

// views/input.js 
Application.InputView = Ember.View.extend({ 
    templateName: "form/input" 
}); 

---

<!-- templates/form/input.hbs --> 
<input {{bindAttr id="id" name="name" type="type" placeholder="placeholder"}}> 

Answer 1

Я хотел бы создать представление, которое принимает все параметры, которые являются переменными. Такие, как:

{{view App.FormEntity 
    name="email" 
    placeholder="My placeholder..." 
    help="We just need a valid email address." 
    valueBinding="value" 
}} 

Оттуда вы могли бы извлечь ярлык, различные имена классов, а затем использовать Ember.TextField, чтобы связать значение.

После того как вы все эти аргументы, переданные в поле зрения, это должно быть красиво и легко создавать разметку, используя смесь bindAttr с, несколько вычисляемых свойств и Ember хелперы (такие как Ember.TextField).

Answer 2

Я новичок в Emberjs и искал почти то же самое, но не мог бы вы просто использовать http://emberjs.com/guides/templates/writing-helpers/ для этого? Я попробую сам, так что может дать больше обновлений, если это сработает.

Обновление: Хорошо, я получил его на работу. Я создал новый Помощники папку с FormgeneratorHelper.js и следующий код:

Ember.Handlebars.registerBoundHelper('control-group', function (options) { 
    var name = options.hash.test.capitalize(); 
    console.log(name); 
    return new Handlebars.SafeString('<div class="control-group"> \ 
      <label class="control-label" for="input' + name + '">' + name + '</label> \ 
      <div class="controls"> \ 
       <input type="text" id="input' + name + '" placeholder="' + name + '" /> \ 
      </div> \ 
     </div>'); 
}); 

то, независимо от того, в какой шаблон вы можете сделать:

{{control-group test="email"}} 

Мне очень нравится идея использования помощников, но если вы используете простой Javascript (в отличие от CoffeScript) и имеете более одной строки кода, то он становится немного уродливым, к сожалению. Но, вероятно, все еще будет использовать этот метод.

Answer 3

Как превратить это в части, которые можно использовать повторно для любого атрибута, который я хочу?IE: электронная почта, пароль, подтверждение пароля и т. Д.

Что вам нужно, это экспериментальный помощник {{control}}. Контрольный помощник в настоящее время разрабатывается и считается экспериментальным. Чтобы включить его, установите ENV.EXPERIMENTAL_CONTROL_HELPER = true, прежде чем требовать Ember.

Я хочу: 1. Используйте конкретный вид (InputView) 2. Используйте конкретный контроллер (Предпочтительно же названием: InputController) ({{вид}} не делает этого, я думаю)

Из-под коробки управляющий помощник ожидает передачи имени шаблона. Это имя шаблона используется для поиска совпадающего представления и контроллера. Так, например:

App.InputView = Ember.View.extend() 
App.InputController = Ember.Controller.extend() 
{{control input}} 

См:

• A control renders a template with a new instance of the named controller and view
• A control's controller and view are lookuped up via template name

1. Уметь использовать это несколько раз ({{оказывают}} не может сделайте это)

A control can be used multiple times

1. Уметь передать в значениях ({{оказывают}} не может это сделать)

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

<!-- templates/form/input.hbs --> 
<label class="control-label" {{bindAttr for="view.inputId"}}> 
    {{view.label}} 
</label> 
<div class="controls"> 
    <input {{bindAttr id="view.inputId" name="view.name" type="type" placeholder="view.placeholder"}}> 
    <span class="help-block">{{view.help}}</span> 
</div> 

// controllers/form_input.js 
App.FormInputController = Ember.ObjectController.extend({ 
    type: "text" 
}); 

// views/form_input.js 
App.FormInputView = Ember.View.extend({ 
    classNames: ["control-group"] 
}); 

<!-- templates/application.hbs --> 
{{control "form/input" 
    inputId="account.email" 
    name="email" 
    label="Email" 
    placeholder="jpublic@email.com" 
    help="We just need a valid email address." 
}} 

Смотрите эту jsbin для работы примера

Также имейте в виду, что A control can specify a model to use in its template - с этим на месте, мы можем связать свойства модели данных. Также if a controller's model changes, its child controllers are destroyed, поэтому элемент управления будет сброшен, как ожидается, если модель будет заменена.