В emberjs вы можете добавить код в файл шаблона:
{{input type="text" value=color}}
затем шаблон отображается. Но вопрос в том, как вы можете добавить это динамически после рендеринга шаблона? Например, я хочу добавить кнопку, чтобы генерировать новые поля ввода (цвета), и пользователь может продолжать добавлять новые цвета по мере необходимости? Как бы это сделать?
Прежде всего, если вы хотите, чтобы пользователь добавил еще один ввод для цвета, я уверен, что вы хотите каким-то образом получить доступ к вводу значения, введенному пользователем, например. в каком-то действии. Поэтому вам придется сделать некоторые привязки, которые будут хранить эти значения.
Допустим, вам нужно сохранить их в каком-то массиве, например. colors. Этот массив изначально будет содержать только один объект, автоматически добавляемый при входе пользователя на маршрут. Эта установка (например, в хуке setupController в маршруте) может выглядеть так:
setupController: function(controller, model) {
controller.set("colors", []);
controller.get("colors").pushObject({ value: "" });
}
И давайте обработаем нажатие на кнопку действием в контроллере:
actions: {
handleClick: function() {
this.get("colors").pushObject({ value: "" });
}
}
Тогда ваш шаблон может выглядеть так:
{{#each color in colors}}
{{input type="text" value=color.value}}
{{/each}}
Используя метод pushObject, сделайте отправку совместимой с привязкой. Каждый раз, когда вы помещаете что-либо в массив colors, шаблон будет автоматически перерисовываться и вставлять другое поле input с правильно привязанными value к color.value. Благодаря этому в каком-то другом действии (например, отправить) вы можете получить доступ ко всем значениям, предоставленным пользователем, и обработать их по своему усмотрению.
