我目前是backbone.js 的新手。我使用 CodeIgniter 作为我的 PHP 框架。
我正在开发一个使用backbone.js 库的现有系统。如果我在 jquery 中执行此操作，我的问题很简单，但由于它使用backbone.js，所以我应该以相同的方式执行此操作。这就是发生的事情。
加载页面后，我将在选择框中填充用户。然后点击“添加”按钮。如果您想删除用户，我还将填充 ul 元素中已添加的用户，以列出带有 x anchor 的所有用户。
在创建仓库用户成功ajax后，我将用户追加到列表中。我使用 jquery 来附加。现在，要删除的单击事件不起作用，因为主干已经完成了 View 的渲染。如何为新添加的元素重新渲染主干点击事件？
下面是我的示例代码
HTML 代码
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-list"></i> User Access
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form method="POST" action="<?php echo base_url();?>warehouse/user" id="add-warehouse-user-form">
<div class="col-lg-4">
<div class="form-group">
<label for="users">Available Users </label>
<input type="hidden" name="wh_id" id="wh_id" value="<?php echo $warehouse->wh_id; ?>" />
<select class="form-control" name="users" id="users">
<?php if(!empty($users)){
foreach($users as $row){
//if(in_array('Head',$row->user_access) AND $row->status == 'ACTIVE'){
echo '<option value="'.$row->user_id.'">'.$row->first_name.' '.$row->last_name.'</option>';
//}
}
}?>
</select>
</div>
</div>
<div class="col-lg-1">
<div class="form-group">
<label for="users"> </label>
<input type="submit" class="btn btn-success form-control" value="Add" />
</div>
</div>
</form>
</div>
</div><br />
<div class="row">
<div class="col-lg-12">
<div class="col-lg-5">
<ul class="list-group" id="list_user">
<?php if(!empty($userlist)){
foreach ($userlist as $ul) {
echo '<li class="list-group-item">'.$ul['name'].' <span class="badge badge-delete"><a class="deleteUser" href="#" data-id="'.$ul['module_id'].'" data-uid="'.$ul['id'].'" data-name="'.$ul['name'].'">x</a></span></li>';
}
} ?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
仓库模型
var WarehouseUserModel = Backbone.Model.extend({
urlRoot: Config.apiBaseUrl + "/warehouse/user",
defaults: {
wh_id: "",
users: ""
}
});
var WarehouseUserDelModel = Backbone.Model.extend({
urlRoot: Config.apiBaseUrl + "/warehouse/user"
});
仓库 View
var WarehouseView = Backbone.View.extend();
//-------------- add user to warehouse --------------//
var WarehouseUserAddNewView = Backbone.View.extend({
el: "#add-warehouse-user-form",
loaderEl: "#form-loader",
events:{
"submit": "createWarehouseUser"
},
createWarehouseUser: function (e) {
var self = this;
e.preventDefault();
var formData = Util.getFormData($(self.el));
var warehouseUser = new WarehouseUserModel(formData);
//disable form
$(self.el).find(" :input").prop("disabled", true);
//show loader
$(self.loaderEl).removeClass("hidden");
warehouseUser.save({}, {
success: function (model, res, options) {
if (res.status == "error") {
Util.formError(res.data);
var errorTemplate = _.template($("#toast-error-template").html());
toastr.error(errorTemplate({errors: res.data}));
//re-enable form
$(self.el).find(" :input").prop("disabled", "");
//hide loader
$(self.loaderEl).addClass("hidden");
} else {
//location.href = res.data.redirectUrl;
/** append user to list and remove from select box **/
$('#list_user').append('<li class="list-group-item">'+$("#users option[value='"+$("#users").val()+"']").text()+' <span class="badge badge-delete"><a class="deleteUser" href="#" data-id="'+res.data.id+'" data-uid="'+$("#users").val()+'" data-name="'+$("#users option[value='"+$("#users").val()+"']").text()+'">x</a></span></li>');
$("#users option[value='"+$("#users").val()+"']").remove();
//re-enable form
$(self.el).find(" :input").prop("disabled", "");
//hide loader
$(self.loaderEl).addClass("hidden");
}
}
});
},
initialize: function () {},
});
//-------------- remove user from warehouse --------------//
var WarehouseUserDeleteView = Backbone.View.extend({
el: ".deleteUser",
events:{
"click": "deleteWarehouseUser"
},
deleteWarehouseUser: function (e) {
elem = $(e.currentTarget)[0];
var self = this;
e.preventDefault();
var warehouseUser = new WarehouseUserDelModel({'id':$(elem).data('id')});
warehouseUser.destroy({
success: function (model, res, options) {
console.log(model);
console.log(res);
console.log(options);
if (res.status == "error") {
Util.formError(res.data);
var errorTemplate = _.template($("#toast-error-template").html());
toastr.error(errorTemplate({errors: res.data}));
} else {
/** append user to select box and remove from lists **/
$("#users").append("<option value='"+$(elem).data('uid')+"'>"+$(elem).data('name')+" </option>");
$(elem).parents('li.list-group-item').remove();
}
}
});
},
initialize: function () {},
});
new WarehouseUserAddNewView();
new WarehouseUserDeleteView();
最佳答案
渲染用户列表的实际代码可能始终是 jquery - 主干不带有默认的渲染功能。然而，通常的做法是将渲染 el 的全部内容的代码放在 View 的 render 方法中。这样它就可以最初被调用，然后在条件发生变化时再次调用。
看起来您的一般方法是使用每个 View 有点像事件处理程序。每个事件都附加了一个事件，并有一个相当大的方法来完成一些工作。只要它对您有用就可以，但是您也可以拥有比处理多个功能更复杂的 View 。我可能建议您使用 WarehouseView 来保留用户列表，并处理可重用渲染和您已经编写的删除方法:
var WarehouseView = Backbone.View.extend({
el: '#list_user',
initialize: function(options) {
this.users = (options && options.users) || [];
// render once on intialize
this.render();
},
events: {
// listen for delete clicks on contained elements
'click .deleteUser': 'deleteWarehouseUser',
},
deleteWarehouseUser: function(ev) {
// your same method code should work here
},
render: function() {
// render the list of users you have
this.$el.html('');
for (var i = 0; i < this.users.length; i++) {
// use jquery to add the user to your list as a <li>
}
}
});
var warehouseView = new WarehouseView();
如果您使用这种方法，那么在添加新用户方法中您可以执行以下操作:
// ... create your user variable
warehouseView.users.push(user);
warehouseView.render();
删除(客户端)还可以包括从 View 列表中删除特定用户，然后重新呈现。
您几乎可以按照自己喜欢的任何方式排列主干对象，但我希望此建议有所帮助。另请注意，一旦您感觉更舒服，为用户创建 BackboneCollection 是比普通数组更“backbone-y”的处理方式。
关于php - 重新渲染添加元素主干的点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45342900/