使用 Backbone.js 获取视图以在保存时更新

Question

我正在学习 Backbone.js 作为一个试用项目，我正在创建一个小的 WordPress 用户管理应用程序。到目前为止，我的代码显示了所有 WordPress 用户的列表，它有一个表单，可以让您向应用程序添加新用户。

一切正常，但是当您添加新用户时，用户列表不会自动更新，您需要刷新页面才能看到添加的新用户，这是不理想的，并且会破坏其中一个好处Backbone.js!

我有一个用户模型，然后是一个编译所有用户的集合。我有一个将用户输出到 ul 的视图，我有一个呈现表单的视图。如何使我的代码工作，以便在调用 .save 方法时包含用户更新的视图？或者有其他方法可以解决这个问题吗？

//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

所有 backbone objects（模型，collections，视图）抛出事件，其中一些与您想要的相关。模型在使用 .set 方法时抛出 change 事件，而 Collections 抛出 add 或 update 事件……完整列表是 here .

一旦您知道哪些事件已被抛出，您就可以收听它们并做出反应。例如，使用 listenTo - 在您的视图的 initialize 中，您可以添加：

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

每当将模型添加到您的 collection 时，这将导致您的视图重新呈现。您还可以使模型 collections 等从代码中的任何位置使用 trigger 抛出自定义事件。

编辑：对于使用表单添加新用户时让您的用户列表视图重新呈现的特定情况，您可以执行以下步骤...在 UserView 的初始化方法中，初始化之后collection，添加：

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

然后在您的表单视图中...假设您想等到服务器上的保存完成，在 addNewUser 方法中，在您保存的成功回调中，添加：

userlisting.collection.add(model);

这会起作用，因为您的 UserView 实例在全局范围内。希望这个对你有用！

使用 Backbone.js 获取视图以在保存时更新

Getting view to update on save using Backbone.js

backbone.js