私は一般的にフォームである次のようなhtmlテンプレートを持っています
<script type="text/template" id="brands-form">
<legend class="label label-info">
<fmt:message key="......"/>
</legend>
<fieldset <@ if (typeof brandId === 'undefined') { @>class="hide"<@ } @>>
<legend>
<@ if (typeof brandId === 'undefined') { @>
<span class="font-small"><font color="gray"><fmt:message key="....."/></font></span>
<@ } else { @>
<span class="font-small"><font color="gray"><fmt:message key=".."/></font></span>
<@ } @>
</legend>
<div class="control-group">
<span class="control-label font-small" for="name">
<b><fmt:message key="daydiary.brand.add.title"/></b>
</span>
<div class="controls">
<input name="name" type="text" required="required" size="30" maxlength="50" class="input-xlarge span11" value="<@= name @>" />
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="name">
<b><fmt:message key="..."/></b>
</span>
<div class="controls">
<img id="brandImage" name="brandImage" class="avatar-large" src="<@ if (typeof brandId === 'undefined') {@>/img/default_brand_picture.jpg<@}else{@><@= brandImage @><@}@>" />
<input type="file" id="brandImageFileUpload" name="brandImageFileUpload"/>
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="description">
<b><fmt:message key="....."/></b>
</span>
<div class="controls">
<textarea name="description" class="input-xlarge span11" required="required" style="resize:none" maxlength="750"><@= description @></textarea>
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="showPro">
<b><fmt:message key="....."/></b>
</span>
<div class="controls">
<input type="radio" name="showPro" value="true" <@ if (showPro) { @> checked<@ } @>>
<span class="label label-info"><fmt:message key="....."/></span>
<input type="radio" name="showPro" value="false" <@ if (!showPro) { @> checked<@ } @>>
<span class="label label-info"><fmt:message key="...."/></span>
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="proDescription">
<b><fmt:message key="..."/></b>
</span>
<div class="controls">
<textarea name="proDescription" class="input-xlarge span11" style="resize:none" maxlength="700"><@= proDescription @></textarea>
</div>
</div>
<div class="form-actions alert-info">
<@ if (typeof brandId === 'undefined') { @>
<button type="submit" class="btn btn-info btn-mini">
<fmt:message key="...."/>
</button>
<button type="reset" class="btn btn-mini">
<fmt:message key="....."/>
</button>
<@ } else { @>
<button type="submit" class="btn btn-info btn-mini">
<i class="icon-edit"></i> <fmt:message key="..."/>
</button>
<@ } @>
</div>
</fieldset>
フォーム送信をフォローしたいとき
this.model.set('name', form.find('[name="name"]').val());
this.model.set('description', form.find('[name="description"]').val());
this.model.set('proDescription', form.find('[name="proDescription"]').val());
this.model.set('showPro', form.find('[name="showPro"]:checked').val() === 'true');
すべてうまくいきますが、うまくいくと
this.model.set('imageData',form.find('[name="imageData"]').val());
HTMLフォーム要素の値が「」にリセットされています。私には非常に驚くべきことです。
値が消えたのかわかりませんか?? 誰かがより多くの情報を必要とする場合、私はバックボーン技術を使用しています.
バックボーン コード
app.View.EditBrand = Backbone.View.extend({
tagName: 'form',
attributes : {
'class' : 'form-horizontal row-fluid'
},
initialize: function(){
this.model.bind('change', this.render, this);
},
template:_.template($('#brands-form').html()),
template_success: _.template($('#notifications-brand-edit-success').html()),
template_error: _.template($('#notifications-brand-edit-error').html()),
events:{
'submit': 'submit'
},
render: function(){
this.delegateEvents();
this.$el.html(this.template(this.model.toJSON()));
this.$("#brandImageFileUpload").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#brandImage').attr('src', e.target.result);
$('#imageData').val(e.target.result);
},
reader.readAsDataURL(this.files[0]);
}
},
submit: function(e){
e.preventDefault();
var form = $(e.target);
this.model.set('name', form.find('[name="name"]').val());
this.model.set('description', form.find('[name="description"]').val());
this.model.set('proDescription', form.find('[name="proDescription"]').val());
this.model.set('showPro', form.find('[name="showPro"]:checked').val() === 'true');
this.model.set('imageData',form.find('[name="imageData"]').val());
var self = this;
self.model.save(null, {
success: function(){
notifications('success' , self.template_success());
},
error: function(){
notifications('error' , self.template_error());
}
});
}
});