如何将 id 与主干中的表行删除按钮关联

发布于 2024-12-21 02:58:49 字数 2771 浏览 0 评论 0原文

我是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>

任何帮助、建议、代码表示赞赏。

原文

I am new to backbone.js below is my code all I need is syntax/code required in backbone.js to produce unique id in every row of my table so that when delete gets pressed I delete that specific row from the table.

$(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>

Any help, advise, code is appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染墨丶若流云 2024-12-28 02:58:49

您不需要为此搞乱id。您的事件处理程序将传递一个事件对象，该对象具有 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: {
    'click .delete': 'deleteItem'
}

此外，您的删除链接中有一个杂散的，您可以删除id 属性；这应该没问题：

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

如果您确实需要 id ，那么我会在上使用数据属性：

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

然后您可以使用 $tr.data('id') 来访问它。将其附加到可以轻松地从行内的任何位置进行查找，并且使用 data 属性可以避免重复 HTML id 属性并最终得到无效的 HTML。 id 值应该来自服务器，因为它们应该被定义。

You don't need to mess around with ids for this. Your event handlers get passed an event object and that has a target property and, for a click event, the target will be the DOM element that was clicked. Something like this should do the trick:

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();
}

Also, your template (correctly) uses class="delete" for the delete link but your event is bound to the element with id="delete"; you'll want to fix your events as well:

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

Furthermore, you have a stray </label> in your delete link and you can probably drop the id attribute altogether; just this should be fine:

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

If you do need the ids then I'd use a data attribute on the <tr>:

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

and then you could use $tr.data('id') to access it. Attaching it to the <tr> makes it easy to find from anywhere within the row and using a data attribute avoids duplicating HTML id attributes and ending up with invalid HTML. The id values should come from the server as that's were they should be defined.

回复收藏 0 原文

~没有更多了~