Backbone with custom rest endpoints

Question

Backbone with custom rest endpoints

dsj

2020年2月8日 02:53

I have created a custom endpoint that returns select user meta data. I am trying to access this endpoint with Backbone. It works as expected in Postman and from my Backbone/javascript script If I have my access check dummied out.

var app2 ={};

app2.Pilot = Backbone.Model.extend({    
    url: POST_SUBMITTER.root + 'pilotdata/v1/pilot/'
 });

 app2.pilot = new app2.Pilot();

 app2.pilot.fetch(
   {data: ({ id: 1 })}
 ).then(function(){
    console.log(app2.pilot)
})

Of course can't have the data hanging out naked. So I implement my access check and I get a status Unauthorized returned as expected. As the nonce is not being returned. But how to set the nonce? from theAverageDev I can up with:

    var app2 ={};

    app2.Pilot = Backbone.Model.extend({    
    url: POST_SUBMITTER.root + 'pilotdata/v1/pilot/',
    sync: function(){
        Backbone.sync('create', this,{
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-WP-NONCE', POST_SUBMITTER.nonce );
            },
        });
    },
 });

 app2.pilot = new app2.Pilot();

 app2.pilot.fetch(
   {data: ({ id: 1 })}
 ).then(function(){
    console.log(app2.pilot)
})

And I admit I do not fully understand what that is doing. Overriding sync? However when I do that I get

TypeError: undefined is not an object (evaluating 'app2.pilot.fetch( {data: ({ id: 1 })}

It appears that overriding sync undefined fetch? What is the best way to use Backbone to pass the nonce?

I think I got it:

var app2 ={};

app2.Pilot = Backbone.Model.extend({    
    url: POST_SUBMITTER.root + 'pilotdata/v1/pilot/',
 });

 app2.pilot = new app2.Pilot();
 app2.pilot.fetch(
  { 
   beforeSend : function(xhr) {
     xhr.setRequestHeader('X-WP-NONCE', POST_SUBMITTER.nonce);
   },  
   data: ({id: 1})
   }
 ).then(function(){
    console.log(app2.pilot)
})

Topic backbone nonce rest-api Wordpress

Category Web

Sally CJ · Accepted Answer · 2020年2月8日 02:53

From the documentation:

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses jQuery.ajax to make a RESTful JSON request and returns a jqXHR.
The sync function may be overridden globally as Backbone.sync, or at a finer-grained level, by adding a sync function to a Backbone collection or to an individual model.

So the code you initially have is actually good, but you should return the Backbone.sync() result like so:

app2.Pilot = Backbone.Model.extend({
  url: POST_SUBMITTER.root + 'pilotdata/v1/pilot/',
  sync: function( method, model, options ){
    return Backbone.sync(method, this, jQuery.extend( options, {
      beforeSend: function (xhr) {
        xhr.setRequestHeader( 'X-WP-NONCE', POST_SUBMITTER.nonce );
      },
    } ));
  },
});

Secondly, you should just pass the same method that Backbone passes to your model's custom sync() function, just as you can see above. And although you don't have to, I also use jQuery.extend() to extend the options object that's passed to that sync() function.

And with your other approach where you pass the header when you call your model's fetch() function, it does work, but extending the sync() function is much better since you don't need to specify the header for each request. :)

Backbone with custom rest endpoints

About