0

我有如下主干视图：

app.View.WelcomeProfil = Backbone.View.extend({
initialize : function(){
this.header = document.createElement('div');
this.$header = $(this.header);
this.render();
},

model : new app.Model.AccountProfile(),

template : {
header : _.template($('#welcome-profile-header').html()),
body : _.template($('#welcome-profile').html()),
error : _.template($('#welcome-profile-error').html())
},

attributes : {
'class' : 'form-horizontal row-fluid'
},

tagName : 'form',

next : function(){
var self = this;

_.each(this.$el.serializeArray(), function(value){
  self.model.set(value.name, value.value);
});

this.model.save(null, {
  success : function(model){
    self.trigger('next');
  },
  error : function(model){
    self.$el.append(self.template.error());
  }
});
},

previous : function(){
 this.trigger('previous');
},

render: function(){
var self = this;

this.$header.html(this.template.header());
this.model.fetch({
  success : function(model){
    self.$el.html(self.template.body(model.toJSON()));
  },
  error : function(model){
    self.$el.html(self.template.body(model.toJSON()));
    self.$el.append(self.template.error());
  }
});
return this;
},

destroy : function(){
  this.$header.remove();
  this.remove();
  this.trigger('remove', this);
}
});

我的模板如下所示

<script type="text/template" id="welcome">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
  <@ if (previous) { @><input type="button" class="pull-left" value="<fmt:message key="foobar.form.previous"/>"/><@ } @>
  <@ if (next) { @><input type="button" class="pull-right" value="<fmt:message key="foobar.form.next"/>"/><@ } @>
  <@ if (finish) { @><input type="button" class="pull-right" value="<fmt:message key="foobar.form.finish"/>"/><@ } @>
</div>

这是插入到 modal-body 中的模板

<script type="text/template" id="welcome-profile">
<fieldset>
<div class="control-group">
  <label class="control-label" for="firstName"><fmt:message key="foobar.user.firstName"/></label>
  <div class="controls">
    <input type="text" class="input-block-level" name="firstName" required="required" placeholder="<fmt:message key="foobar.user.firstName"/>" value="<@= firstName @>">
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="lastName"><fmt:message key="foobar.user.lastName"/></label>
  <div class="controls">
    <input type="text" class="input-block-level" name="lastName" required="required" placeholder="<fmt:message key="foobar.user.lastName"/>" value="<@= lastName @>">
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="jobTitle"><fmt:message key="foobar.user.jobTitle"/></label>
  <div class="controls">
    <input type="text" class="input-block-level" name="jobTitle" required="required" placeholder="<fmt:message key="foobar.user.jobTitle"/>" value="<@= jobTitle @>">
  </div>
</div>

我希望当用户单击下一步时...我应该能够检查名字，姓氏和职位字段是否已填写..？这可能吗。

4

1 回答 1

0

在您的模型上创建一个validate方法，如下所示： http: //backbonejs.org/#Model-validate

创建后，主干将在运行保存之前自动调用此方法，您可以绑定到invalid事件以更新带有错误的视图。

于 2013-08-13T09:24:41.693 回答