骨幹視圖上的事件不會觸發

我已經編寫了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

骨幹視圖上的事件不會觸發

回答

相關問題