rest api - rendering view in backbone

admin管理员组

文章数量:1391975

I'm attempting to write a plugin that will present a mostly pre-filled out form with a custom header. I've created a RESTful endpoint to supply and receive the data. And I've created a Model in Backbone.js:

   var app={};
   app.pilot_id = $("#user_id").val();   
   app.Pilot = Backbone.Model.extend({    
    url: POST_SUBMITTER.root + 'pilotdata/v1/pilot/',   
    sync : function(method, model, options){
        return Backbone.sync(method, this, $.extend(options, 
        {beforeSend : function (xhr) {
            xhr.setRequestHeader ('X-WP-NONCE', POST_SUBMITTER.nonce);
        }
      }))   
    },
    defaults : {
        lastName: 'Doe'    , firstName: 'John'
    },
    initialize : function(){
        this.fetch({ data: ({id: app.pilot_id})});
    }
 });

app.pilot = new app.Pilot(); { after the fetch lastName will be 'Smith' and firstName will be 'Sue' 

and I've created a form view using BackForm.js

    app.PilotForm =  Backform.Form.extend({
    el: $("#personalInformation"),
    events: {
        "submit": function(e) {
        e.preventDefault();this.model.save( {patch: true})
        .done(function(req, status, err) 
        {
            alert( status + ', ' + err);
            console.log(status, err);
        })  
        .fail(function(req, status, err){
            alert( status + ', ' + err);
        });
          return false;
        }
     },
     fields: [
       {name: "id", label: "Id", control: "uneditable-input"},
       {name: "firstName", label: "First Name", control: "input"},
       {name: "lastName", label: "Last Name", control: "input"},
       {control: "button", label: "Save to server"}
     ],

});

I've also created a header view(not using BackForm):

 app.PilotHeader = Backbone.View.extend({
  el: '#header',
    template: _.template($('#name-template').html()),
  initialize: function(){
    this.render();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON() ));
    return this;
  }
});   

(template not shown) then calling the views:

    new app.PilotHeader({model: app.pilot}).render();          
    new app.PilotForm({model: app.pilot}).render();

My problem is the header is using the data from _previousAttributes {John, Doe} and the Form is using the correct attributes {Sue, Smith}. I can not get the header to use the correct updated values. What am I missing?

本文标签： rest apirendering view in backbone