Форма отправки события в представлении

Question

У меня есть форма внутри View. Как и где я могу обработать событие отправки формы? Также, где я могу написать код для обработки событий на элементах, присутствующих в этой форме. Я пытался справиться с этим в:

//Instantiating a view with a template name signup
var signup = Ember.View.create({
templateName: "signup",
name: 'Sign Up',
click: function()
{
alert('click triggered from signup template');
},
submit: function()
{
alert('submit triggered');
},
signup: function()
{
alert('signup triggered');
}
});

<script type="text/x-handlebars" data-template-name="signup">
<form class="form-horizontal"  {{action "signup" on="submit"}}>
<br/>
<div  align="center" >
<table class="table-hover>
<tr>
    <td>
    <label>First Name</label>
    </td>

    <td>
    {{input value=firstName class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Last Name</label>
    </td>

    <td>
    {{input value=lastName class="controls" type="text"}}
    </td>
</tr>

<button class="btn  btn-primary " type="submit" >Register</button>
</div>
</form>
</script>

Когда я нажимаю в любом месте на кнопке, срабатывает только событие щелчка. Как получить доступ к событию отправки?

Answer 1

Мой ответ включает в себя два решения. Первый - это метод, использующий представления правильно. Второе решение использует Ember Component, который, я думаю, ближе к тому, что вы хотели сделать.

---

Ember View Метод:

Я создал рабочую демонстрацию здесь, чтобы вы могли на нее посмотреть.

Вот несколько вещей, которые вам нужно сделать:

Код вашего шаблона:

Вы должны быть осторожны, чтобы создать чистый и правильный код. Вы не закрыли имя класса на вашем <table> тег и вы не включили закрытие </table> тег. Это очищенный шаблон:

<form class="form-horizontal" {{action "signup" on="submit"}}>
    <br/>
    <div align="center">
        <table class="table-hover">
            <tr>
                <td><label>First Name</label></td>
                <td>{{input value=firstName class="controls" type="text"}}</td>
            </tr>
            <tr>
                <td><label>Last Name</label></td>
                <td>{{input value=lastName class="controls" type="text"}}</td>
            </tr>
        </table>
        <button class="btn btn-primary" type="submit">Register</button>
    </div>
</form>

Используя ваш взгляд:

Вы не можете добавлять действия к такому представлению. Действия вида должны быть обработаны либо на Route или Controller, Смотрите здесь примеры того, как использовать действия с представлением.

По сути, ваш обработчик действий будет пытаться передать действие контроллеру или маршруту, который включает ваше представление. Обратите внимание, что в моем демо IndexRoute имеет модель, и действие, которое нужно выполнить, и чтобы шаблон индекса ссылался на представление:

{{view App.SignUpForm}}

---

Метод угольного компонента:

Если вы хотите сохранить действие в своем представлении, то вам нужно использовать компонент. Смотрите эту демонстрацию, для использования в качестве компонента.

App.SignUpFormComponent = Ember.Component.extend({
  templateName: "signup",
  actions: {
    signup: function(){
      alert("SignUp Clicked");
    }
  }
});

Его использование немного отличается, но теперь действие является автономным, и его не нужно включать в Route или же Controller что, возможно, больше того, что вы искали.

Чтобы использовать его, вы можете сделать:

{{sign-up-form data=this}}

Данные вашей модели теперь доступны в компоненте, выполнив data.firstName а также data.lastName, так что шаблон тоже немного изменен. Вы можете увидеть это в разделе HTML демонстрации JSBin, которую я включил.

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