重新渲染添加元素主干的点击事件

Question

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

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

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

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

下面是我的示例代码

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 - 主干没有默认的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 Collection 是一种更“主干”的做事方式，而不是简单的数组。