重新呈现添加元素的点击事件 backbone

Question

我目前是 backbone.js 的新人。我使用 CodeIgniter 作为我的 PHP 框架。

我正在开发一个使用 backbone.js 库的现有系统。如果我将在 jquery 中进行操作，我的问题就很简单了，但是由于它使用了 backbone.js，因此我应该以相同的方式进行操作。这会发生什么。

页面加载后，我将在 select 框中填充用户。然后使用按钮 'ADD'。如果您想删除用户，我还将填充已在 ul 元素内添加的用途，以列出所有带有 x 锚点的用户。

我在创建仓库用户 ajax 成功后将用户追加到列表中。我使用 jquery 来追加。现在要删除的点击事件不起作用，因为 backbone 已经完成视图渲染。如何为新添加的元素重新渲染backbone点击事件？

下面是我的示例代码

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">&nbsp; </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"
});

仓库视图

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();

Answer 1

呈现您的用户列表的实际代码可能总是 jquery - backbone 没有默认的 render 功能。但是，通常的做法是将呈现 el 的全部内容的代码放在视图的 render 方法中。这样一开始就可以调用它，然后在条件发生变化时再次调用它。

看起来您的一般方法是像使用事件处理程序一样使用每个视图。每个都附加了一个事件，用一个相当大的方法来完成一些工作。只要它对您有用就没问题，但您也可以拥有比处理多个功能更复杂的视图。我可能会建议您使用 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();

删除（客户端）还可以包括从视图列表中删除特定用户，然后重新呈现。

您几乎可以随心所欲地排列 backbone 对象，但我希望此建议对您有所帮助。另请注意，一旦您感觉更自在，为您的用户创建 Backbone Collection 是比普通数组更 "backbone-y" 的做事方式。

重新呈现添加元素的点击事件 backbone

re render click event for added element backbone

html

php

jquery

codeigniter

backbone.js