骨干ModelBinder，获取模型时不填充

Question

Maybe I'm using model binder incorrectly or maybe marionette interferes, but my view and model don't seem to be communicating and therefore not pre-filling my template fields

View

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
      }
    })
  }
)

Template

<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

You have to define the bindings, its not automatic.

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'
    }