Question

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

这一切都运行正常但是当您添加新用户时，用户列表不会自动更新，您需要刷新页面以查看添加的新用户，这不是理想的并且会使其中一个失败。 Backbone.js的好处！

我有一个用户模型，然后是一个编译所有用户的集合。我有一个视图，将用户输出到ul，我有一个呈现窗体的视图。当.save方法被调用包含新用户的用户更新的视图时，如何使我的代码工作？还是有另一种方法来解决这个问题吗？

＆＃13;

//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')
});

＆＃13;

Answer 1

所有骨干对象（模型，集合，视图）都会抛出事件，其中一些事件与您想要的事物相关。模型在使用change方法时抛出.set个事件，而集合抛出add或update个事件......完整列表为here。

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

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

只要将模型添加到您的集合中，这将导致您的视图重新呈现。您还可以使用模型，集合等来从代码中的任何位置使用trigger投射自定义事件。

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

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

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

userlisting.collection.add(model);

这将起作用，因为UserView的实例位于全局范围内。希望这个适合你！

使用Backbone.js获取使用save进行更新的视图

1 个答案: