以下のようにモデルの検証を設定しました
- 完全な CoffeeScript コード: http://pastebin.com/3isZZke8
- JS Fiddle のデモ: http://jsfiddle.net/XKTnb/
モデルの検証
class Todo extends Backbone.Model
validate: (attrs) ->
errs = {}
hasErrors = false
if (attrs.title is "")
hasErrors = true
errs.title = "Please specify a todo"
if hasErrors
return errs
ビューのエラー関連コード
class TodoView extends Backbone.View
events:
"keypress .editing input[name=todo]": "saveTodo"
"keyup .editing input[name=todo]": "closeEdit"
"blur input[name=todo]": "clearErrors"
initialize: ->
...
@model.bind("change", @render)
@model.bind("error", @handleError)
saveTodo: (e) ->
if e.type is "keypress" and e.charCode isnt 13
return
@model.set("title": @$("input[name=todo]").val())
console.log @$("input[name=todo]").val() + "...", @model.isValid(), @model.get("title")
if @model.isValid()
@closeEdit()
closeEdit: (e) ->
if (e)
if e.type is "keyup" and e.keyCode isnt 27 then return
@$el.removeClass("editing")
handleError: (model, errs) ->
@clearErrors()
@$("input[name=todo]").after($("<span />", {
class: "error",
html: errs.title
}));
console.log "error handled"
clearErrors: ->
@$el.remove(".error")
ではTodoView.saveTodo
、モデルが有効かどうかを確認します。有効な場合は、save
成功することを期待し、編集編集モードを終了したいと考えています。ただし、検証が行われ、モデルが保存されていないため、有効な状態になっている可能性がありますisValid
。true
アップデート
上記の JS Fiddle へのリンクを追加しました。todo を追加してから、todo を空白にしてみてください。私が持っていたコードではあるが、編集モードを閉じることに注意してください:
saveTodo: (e) ->
if e.type is "keypress" and e.charCode isnt 13
return
@model.set("title", @$("input[name=todo]").val())
if @model.isValid() # model appears to be valid here!
@model.save()
@closeEdit()
ダブルクリックして編集モードに入ります。検証が正しく行われたことを意味するエラーが表示されます。