骨干视图上的事件不会触发

我已经编写了Backbone视图--ListView并希望显示表中的内容。对于单独的表行，还有另一个视图 - EmployeeView。骨干视图上的事件不会触发

我绑定点击事件上的删除按钮，这是与function-deleteEmployee（）模板内，但看起来像事件不工作，函数没有被调用。

下面是代码嵌段

  app.ListView = Backbone.View.extend({ 

       tagName : 'table', 

       render : function() { 

        $(this.el).append("<tr><td>Employee</td><td>Designation</td><td>Edit</td><td>Delete</td></tr>"); 
        app._collection.each(this.renderEmployee, this); 
        $('#main').append(this.$el.html()); 
        // main is the main div tag inside body 

       }, 

       renderEmployee : function(model) { 

        var employeeView = new app.EmployeeView({ 
         model : model 
        }); 

        $(this.el).append(employeeView.render().el); 

       }, 

       initialize : function() { 

        app._collection.on('reset', this.render, this); 

        app._collection.fetch(); 
        console.log(JSON.stringify(app._collection)); 

       } 
      }); 


      app.EmployeeView = Backbone.View.extend({ 

       tagName : 'tr', 

       template : _.template($("#employee-template").html()), 

       events : { 

        "click input#editemp" : 'editEmployee', 
        "click input#deleteemp" : 'deleteEmployee' 

       }, 

       render : function() { 

        console.log('inside employeeView'); 
        console.log(JSON.stringify(this.model)); 
        this.$el.html(this.template(this.model.toJSON())); 
        this.delegateEvents(); 
        return this; 

       }, 


       editEmployee : function() { 

       }, 

       deleteEmployee : function() { 

        alert('Hello'); 

       } 

      });

这里是模板 -

<script type="text/template" id="employee-template" > 

     <td><%= name %></td> 
     <td><%= designation %></td> 
     <td><input id="editemp" type="button" value="Edit"/></td> 
     <td><input id="deleteemp" type="button" value="Delete"/></td> 

    </script>

来源

2015-10-13 Abhijeet Srivastava

看到它的工作here..http：//jsfiddle.net/sandenay/2yqrh1yx/ –

由于事件被绑定到'tr' element..can你检查你的模板被'tr'包裹了吗？ –

感谢您输入Sandeep，但tr元素在模板代码中不存在，因为它已在EmployeeView中声明为tagName。我怀疑，问题是我将EmployeeView添加到主视图中的方式ListView –

使用一类以识别重复的元素，而不是IDS（因为一个id标识单个独特元件）。

events : { 
    "click .editemp" : 'editEmployee', 
    "click .deleteemp" : 'deleteEmployee' 
} 

<script type="text/template" id="employee-template" > 
    <td><%= name %></td> 
    <td><%= designation %></td> 
    <td><input class="editemp" type="button" value="Edit"/></td> 
    <td><input class="deleteemp" type="button" value="Delete"/></td> 
</script>

更新的jsfiddle这里https://jsfiddle.net/2yqrh1yx/11/

来源

2015-10-27 19:53:39 mhanney

骨干视图上的事件不会触发

回答

相关问题