Backbone ModelBinder, не заполняя, когда модель забирается

Question

Может быть, я использую модель связующий неправильно или может быть марионеткой мешает, но, похоже, на мой взгляд, и модель не будет общения, и поэтому заранее не заполняя мои поля шаблона

Просмотр

define([ 
    'marionette', 
    'underscore', 
    'text!app/views/templates/user/form.html', 
    'app/models/user' 
], 
    function (Marionette, _, Template, Model) { 
    "use strict" 

    return Marionette.ItemView.extend({ 


     events: { 
     'submit .edit-user-form': 'onClickSave' 
     }, 


     initialize: function(options) { 

     /* initiate model binder */ 
     Backbone.ModelBinder.bind(Model, this.$el) 

     /* create empty model in case its a create request */ 
     this.model = new Model() 

     /* if the options.id is passed then lets load an instance of the model */ 
     if (options && options.id) { 
      this.model = new Model({id: options.id}) 
      this.model.set('id', options.id) 

      /* set that to this so its acceptable inside the fetch */ 
      var that = this 

      this.model.fetch({ 
      /* fetch request successful */ 
      success: function (response) { 
       /* set the model instance trigger a re-render */ 
       that.model = response 
       that.render() 
      }, 
      /* we couldn't load the model so we go back to the users list */ 
      error: function() { 
       alert('User could not be loaded, redirecting you to the users list') 
       window.location.hash = 'users' 
      } 
      }) 
     } 
     }, 


     /* save button triggered so prevent default and trigger the model to save */ 
     onClickSave: function (ev) { 

     ev.preventDefault() 

     this.model.save({}, { 
      success: function (response) { 
      console.log(response, 'response') 
      } 
     }) 
     }, 


     /* render the form */ 
     render: function() { 

     var html = _.template($(Template).html(), this.model.toJSON()) 
     this.$el.html(html) 

     return this 
     } 
    }) 
    } 
) 

Шаблон

<script type="text/template" id="userFormTemplate"> 
    <div id="userForm"> 
     <h2><img src="/img/icons/32/update.png" /> Update User</h2> 
     <h2><img src="/img/icons/32/create.png" /> Create New User</h2> 
     <form class="edit-user-form"> 


      <fieldset name="personal" class="halfWidth left"> 
       <legend>Personal Details:</legend> 
       <div class="control-group"> 
        <label class="control-label">First name:</label> 
        <div class="controls"> 
         <input type="text" name="first_name" id="first_name"> 
        </div> 
       </div> 

       <div class="control-group"> 
        <label class="control-label">Last name:</label> 
        <div class="controls"> 
         <input type="text" name="last_name" id="last_name"> 
        </div> 
       </div> 

       <div class="control-group"> 
        <label class="control-label">Birthdate:</label> 

        <div class="controls"> 
         <input type="date" name="birthdate" id="birthdate"> 
        </div> 
       </div> 
      </fieldset> 


      <fieldset name="job" class="halfWidth right"> 
       <legend>Job Details:</legend> 
       <div class="control-group"> 
        <label class="control-label">Job Title</label> 
        <div class="controls"> 
         <input type="text" name="job_title" id="job_title"> 
        </div> 
       </div> 

       <div class="control-group"> 
        <label class="control-label">Start Date:</label> 
        <div class="controls"> 
         <input type="date" name="job_start_date" id="job_start_date"> 
        </div> 
       </div> 

       <div class="control-group"> 
        <label class="control-label">Probation Ends:</label> 
        <div class="controls"> 
         <input type="date" name="job_probation_ends" id="job_probation_ends"> 
        </div> 
       </div> 

      </fieldset> 


      <div class="clearfix"></div> 
      <br /> 


      <fieldset name="personal" class="halfWidth left"> 
       <legend>Work Details:</legend> 
       <div class="control-group"> 
        <label class="control-label">Work Email</label> 
        <div class="controls"> 
         <input type="email" name="work_email" id="work_email"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label">Work Address:</label> 

        <div class="controls"> 
         <input type="text" name="work_address" id="work_address"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label">Work Phone Number:</label> 
        <div class="controls"> 
         <input type="text" name="work_phone_number" id="work_phone_number"> 
        </div> 
       </div> 
      </fieldset> 


      <fieldset name="personal" class="halfWidth right"> 
       <legend>Personal Details:</legend> 
       <div class="control-group"> 
        <label class="control-label">Personal Email</label> 
        <div class="controls"> 
         <input type="email" name="personal_email" id="personal_email"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label">Home Address:</label> 
        <div class="controls"> 
         <input type="text" name="personal_address" id="personal_address"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label">Home Phone Number:</label> 
        <div class="controls"> 
         <input type="text" name="personal_phone_number" id="personal_phone_number"> 
        </div> 
       </div> 
      </fieldset> 


      <div class="clearfix"></div> 
      <br /> 


      <div class="control-group button"> 
       <button class="btn save-form btn-success" type="submit">Create User</button> 
      </div> 
     </form> 
    </div> 
</script> 

Answer 1

Вы должны определить привязок, его не автоматически.

var bindings = { 
     first_name: '#first_name', 
     last_name: '#last_name', 
     birthdate: '#birthdate', 

     job_title: '#job_title', 
     job_start_date: '#job_start_date', 
     job_probation_ends: '#job_probation_ends', 

     work_email: '#work_email', 
     work_address: '#work_address', 
     work_phone_number: '#work_phone_number', 

     personal_email: '#personal_email', 
     personal_address: '#personal_address', 
     personal_phone_number: '#personal_phone_number' 
    }