如何在主干中关联id和表行删除按钮 - how to associate id with table row delete button in backbone

how to associate id with table row delete button in backbone

本文关键字：删除按钮 id 关联 | 更新日期: 2023-09-27

我是新的backbone.js下面是我的代码所有我需要的是在backbone.js所需的语法/代码在我的表的每一行产生唯一的id，以便当删除得到按下我从表中删除该特定行。

$(function(){
    var Person = Backbone.Model.extend({
        id: 0,
        name: 'default name',
        age: 100
    });
    var PersonCollection = Backbone.Collection.extend({
        model: Person
      });
    var PersonView = Backbone.View.extend({
        el: $('#personEL'),
        events: 
        {
            "click #login-btn" : "loginClick"
        },
        loginClick: function()
        {
          var name = $('#name').val();
          var age = $('#age').val();
          var newPerson = new Person({id: 1,name: name, age : age});          
          this.personCollection.add(newPerson);          
          var showit = new zview({model: newPerson});
        },
        initialize: function(){
         this.personCollection = new PersonCollection();
           this.render(); 
        },
        render: function()
        {
                var template = _.template( $("#personInputTemplate").html(), {} );
        this.el.html(template);
                return this;
        }
    });

     zview = Backbone.View.extend({
        el: $('#personTable'),
        events:{
            'click #delete' : 'deleteItem'
        },
       initialize: function()
       {
        this.render();   
        return this;
       }
       ,
       render: function()
       {
           var template = _.template( $('#personDisplayTemplate').html(), this.model.toJSON() );
           console.log(template);
           $(this.el).append(template);
       }
       ,
       deleteItem: function()
       {
           console.log('delete');
       }
    });

var persons = new PersonView();
  });

html:

<body>


<script type="text/template" id="personInputTemplate">
    <p>Person Name<input type="text" id="name" /></p>
    <p>Person Age<input type="text" id="age" /></p>        
    <p><button id="login-btn">Save</button></p>
</script>
<script type="text/template" id="personDisplayTemplate">
            <tr>
                 <td><span><%= name ? name : '' %></span></td>
                 <td><span><%= age ? age : '' %></span></td>
                 <td><a href="#" id="<%= id ? id : '' %>" class="delete"> Delete</a> </label></td>
            </tr>
</script>

<div id ="personEL"></div>
<div id="showPerson"></div>
 <div id="display">
        <table id="personTable">
        </table>
    </div>

任何帮助，建议，代码都是感激的。

您不需要在id s上乱来。您的事件处理程序获得一个具有target属性的事件对象，对于单击事件，target将是被单击的DOM元素。像这样的代码应该可以达到这个效果:

deleteItem: function(ev) {
    var $tr = $(ev.target).closest('tr');
    // Now $tr is the jQuery object for the <tr> containing the .delete
    // element that was clicked.
    $tr.remove();
}

同样，您的模板(正确地)使用class="delete"作为删除链接，但您的事件绑定到具有id="delete"的元素;你会想要修复你的events以及:

events: {
    'click .delete': 'deleteItem'
}

此外，你有一个流浪的</label>在你的删除链接，你可能会删除id属性一起;这样就可以了:

<td><a href="#" class="delete">Delete</a></td>

如果你确实需要id s，那么我会在<tr>上使用数据属性:

<tr data-id="<%= id ? id : '' %>">

，然后你可以使用$tr.data('id')来访问它。将它附加到<tr>可以很容易地从行中的任何地方找到，并且使用数据属性可以避免重复HTML id属性并以无效的HTML结束。id值应该来自服务器，因为它们应该被定义。