Getting view to update on save using Backbone.js

Question

I am learning Backbone.js and as a trial project I am creating a little WordPress user management application. So far my code shows a listing of all WordPress users and it has a form which enables you to add new users to the application.

This all works fine however when you add a new user the listing of users doesn't update automatically, you need to refresh the page to see the new user added which isn't ideal and defeats one of the benefits of Backbone.js!

I have a model for a user and then a collection which compiles all the users. I have a view which outputs the users into a ul and I have a view which renders the form. How do I make my code work so when the .save method is called the view which contains the users updates with the new user? Or is there another way to approach this?

//define the model which sets the defaults for each user
var UserModel = Backbone.Model.extend({
    defaults: {
        "username": "",
        "first_name": "",
        "last_name": "",
        "email": "",
        "password": "",
    },
    initialize: function(){
    },
    urlRoot: 'http://localhost/development/wp-json/wp/v2/users'
});

//define the base URL for ajax calls
var baseURL = 'http://localhost/development/wp-json/wp/v2/';

//function to define username and password
function authenticationDetails(){
    var user = "myUserName";
    var pass = "myPassword";
    var token = btoa(user+':'+pass);
    return 'Basic ' + token;
}

//add basic authorisation header to all API requests
Backbone.$.ajaxSetup({
    headers: {'Authorization':authenticationDetails()}
});

//create a collection which returns the data
var UsersCollection = Backbone.Collection.extend(
    {
        model: UserModel,
        // Url to request when fetch() is called
        url: baseURL + 'users?context=edit',
        parse: function(response) {
            return response;
        },
        initialize: function(){
        }
    });

// Define the View
UserView = Backbone.View.extend({
    model: UserModel,
    initialize: function() {
      // create a collection
      this.collection = new UsersCollection;
      // Fetch the collection and call render() method
      var that = this;
      this.collection.fetch({
        success: function () {
            that.render();
        }
      });
    },
    // Use an external template
    template: _.template($('#UserTemplate').html()),
    render: function() {
        // Fill the html with the template and the collection
        $(this.el).html(this.template({ users: this.collection.toJSON() }));
        return this;
    },

});

var userListing = new UserView({
    // define the el where the view will render
    el: $('#user-listing')
});

NewUserFormView = Backbone.View.extend({
    initialize: function() {
      this.render();
    },
    // Use an external template
    template: _.template($('#NewUserTemplate').html()),
    render: function() {
        // Fill the html with the template and the collection
        $(this.el).html(this.template());
        return this;
    },
    events: {
        'click .create-user':'addNewUser'
    },
    addNewUser: function(){

        var newFirstName = $('.first-name').val();
        var newLastName = $('.last-name').val();
        var newEmail = $('.email').val();
        var newPassword = $('.password').val();
        var newUserName = newFirstName.toLowerCase();

        var myNewUser = new UserModel({username:newUserName,first_name:newFirstName,last_name:newLastName,email:newEmail,password:newPassword});
        console.log(myNewUser);
        myNewUser.save({}, {
            success: function (model, respose, options) {
                console.log("The model has been saved to the server");
            },
            error: function (model, xhr, options) {
                console.log("Something went wrong while saving the model");
            }
        });
    }
});

var userForm = new NewUserFormView({
    // define the el where the view will render
    el: $('#new-user-form')
});

Answer 1

All backbone objects (models, collections, views) throw events, some of which would be relevant to what you want. Models throw change events when their .set methods are used, and Collections throw add or update events... a complete list is here.

Once you know which events are already being thrown, you can listen to them and react. For example, use listenTo - in your view's initialize, you can add:

this.listenTo(this.collection, 'add', this.render);

That will cause your view to rerender whenever a model is added to your collection. You can also cause models, collections, whatever, to throw custom events using trigger from anywhere in the code.

EDIT: For the specific case of getting your user listing view to rerender when a new user is added using the form, here are the steps you can take... In the initialize method of your UserView, after the initialize the collection, add:

this.listenTo(this.collection, 'add', this.render);

Then in your form view... assuming you want to wait until the save is complete on your server, in the addNewUser method, in the success callback of your save, add:

userlisting.collection.add(model);

This will work, since the instance of your UserView is in the global scope. Hope this one works for you!