0
私はBackbone.jsを学んでおり、試用版プロジェクトとして少しのWordPressユーザー管理アプリケーションを作成しています。これまでのところ私のコードはすべてのWordPressユーザーのリストを表示し、アプリケーションに新しいユーザーを追加できるフォームを持っています。Backbone.jsを使用して保存時に更新を表示するには
これはうまくいきますが、新しいユーザーを追加するとユーザーのリストは自動的に更新されません。ページを更新して新しいユーザーを追加する必要があります。これは理想的ではなく、バックボーンの利点の1つを打ち負かします.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')
});
認証された呼び出しを管理するために 'ajaxSetup'を使用しないでください。代わりに、[あなたの利点にバックボーンの 'sync'関数を使う]（https://stackoverflow.com/a/41991573/1218980）。 –
['$（this.el）===こちら。$ el']（https://stackoverflow.com/a/40321584/1218980）。 –
ビュー内の 'model：UserModel、'は役に立たない。このビューには、Modelコンストラクタは必要ありません。 –