Backbone View渲染和刷新页面

Question

我还在学习Backbone并且整天都在搜索。我的页面中有一些视图： 员工视图：

var EmployeeView = Backbone.View.extend({
    initialize: function(options){

        this.bus = options.bus;
        this.model.on("onChange", this.render, this);
        this.bind("venueSelected", this.model);
        this.updateButton = $("#employeeUpdate");
    },
    setup: function () {
        var self= this;
        this.get('data').on('change', function () {
            self.trigger("change");
        })},
    attributes : function () {
        // Return model data
        return {
            id : this.model.get("Id")
        }},
    events: {
        "click #employeeDelete": "onClickDelete",
        "click #employeeUpdate": "onClickUpdate",
        "click #employeeDetails": "onClickDetails"
    },
    onClickDetails: function(model){
        this.bus.trigger("venueSelected", this.model);
    },
    onClickUpdate: function(e, model){
        e.stopPropagation();
        $(e.currentTarget).attr("disabled", "true");
        //$('span[id*=updateBtn]').attr("disabled", "true");
        $("button.upd").attr("disabled", true);

        var updateEmployee = new UpdateEmployeeView({model: this.model, bus: this.bus});
        updateEmployee.render();
    },
    onClickDelete: function(){
        this.model.destroy();
        },
    render: function(){
        this.$el.attr("id", this.model.Id);

        this.$el.html("<div row style='width:100%;'><div class='col-sm-12 liRowMargin'>" +this.model.get("Name") + "<button id='employeeDetails' class='btn-primary btnFloat'>Details</button>" + "<button id='employeeDelete' class='btn-primary btnFloat'>Delete</button>" + "<button id='employeeUpdate' class='upd btn-primary btnFloat'>Update</button>" + "</div>");
        return this;
    }
});

EmployeesView：

var EmployeesView = Backbone.View.extend({

    id: "employees",
    el: "#employeeList",

    initialize: function(options){
        this.options = options;
        if (!(options && options.model))
            throw new Error("model is not specified.");

        this.bus = options.bus;
        this.model.on("add", this.onAddEmployee, this);
        this.model.on("remove", this.onRemoveEmployee, this);
        this.bus.on("onAddEmployee", this.onAddEmployee, this);
    },
    onRemoveEmployee: function(employee){
        this.$("li#" + employee.get("Id")).remove();
    },
    onAddEmployee: function(employee){

        employee.save();
       var view = new EmployeeView({model: employee, bus: this.bus});
       this.$el.append(view.render().$el);
    },
    render: function(){
        var self = this;

        this.model.each(function(employee){
        var view = new EmployeeView({ model: employee, bus: self.bus });
        self.$el.append(view.render().$el);
        });

        return this;
    }
});

我用来调用事件点击的另一个视图的AddRender视图：

var AddRender = Backbone.View.extend({
    el: "#newEmployee",
    id: "addRender",

    initialize: function(options){
        this.options = options;
        this.bus = options.bus;
    },
    events: {
        "click #btnNewEmployee": "OnClickNewEmployee"
    },
    OnClickNewEmployee: function(){

        var addEmployee = new AddNewEmployee({ bus : this.bus});
        addEmployee.render();
    },
    render: function(){
        this.$el.append("<button id='btnNewEmployee'>Add Employee</button>");
    }
});

然后应该用来添加新员工的AddNewEmployeeView：

var AddNewEmployee = Backbone.View.extend({

    id: "addingNewEmployee",
    el: "#newEmployeeAdd",

    initialize: function(options){
        this.options = options;
        this.bus = options.bus;
    },
    events: {
        "click #addNewEmployeeClick": "onClickAddNewEmployee"
    },
    onClickAddNewEmployee: function(){

        var employee = new Employee();
        employee.set('Name', $('#name').val());
        employee.set('KnownAs', $('#knownas').val());
        employee.set('Surname', $('#surname').val());
        employee.set('ContactNumber', $('#contactNumber').val());
        employee.set('Position', $('#position').val());

        //this.bus.trigger("onAddEmployee", employee);

        $("#name").val("");
        $("#knownAs").val("");
        $("#surname").val("");
        $("#contactNumber").val("");
        $("#position").val("");
        $("#name").focus();

        //this.$el.unbind();
        //this.$el.empty();
    },
    render: function() {
        console.log("Rendered Entry Point");
        this.$el.append("<label>Name:</label><input type='text' autofocus id='name'/>");
        console.log("Rendered");

        return this;
    }
});

我面临的挑战是，当我从OnClickNewEmployee视图调用addRender事件以显示AddNewEmployee视图时，AddNewEmployee视图会闪烁，整个页面刷新，我已经看到在Backbone页面渲染后没有调用事件，但我对使页面刷新的原因感到困惑