1

我有一个像下面这样的 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>&nbsp;<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());
        }
    });
   }
  });
4

0 回答 0