-
Notifications
You must be signed in to change notification settings - Fork 3
05: Formから予定を追加する
Kazuhito Hokamura edited this page Oct 23, 2013
·
8 revisions
フォームと予定を描画する部分のHTMLを記述します。
...
<body>
<form class="createForm">
<h3>タイトル</h3>
<p><input type="text" name="title"></p>
<h3>日時</h3>
<p><input type="datetime-local" name="datetime"></p>
<p><input type="submit"></p>
</form>
<p class="count"></p>
<ul class="list"></ul>
</body>
</html>フォームのsubmitイベントをjQueryで設定して、送信されたときにschedulesコレクションにデータを追加します。（前回書いたコレクションのデータ確認用のコードは削除してかまいません）
window.App = {};
$(function() {
var schedules = new App.Schedules();
$('.createForm').submit(function(e) {
e.preventDefault();
var title = $('input[name="title"]').val();
var datetime = $('input[name="datetime"]').val();
schedules.add({
title: title,
datetime: moment(datetime)
}, { validate: true });
});
});データを追加しただけでは表示されないので、addイベント時に要素を作って追加します。
window.App = {};
$(function() {
var schedules = new App.Schedules();
$('.createForm').submit(function(e) {
e.preventDefault();
var title = $('input[name="title"]').val();
var datetime = $('input[name="datetime"]').val();
schedules.add({
title: title,
datetime: moment(datetime)
}, { validate: true });
});
schedules.on('add', function(model) {
$('.count').html(schedules.length + '件の予定があります');
var $li = $('<li>').html(
model.dateFormat('MM月DD日 HH時mm分') + '：' + model.get('title')
);
$('.list').append($li);
});
schedules.on('invalid', function(model, message) {
alert(message);
});
});フォームを送信して予定が追加されれば成功です。