Question

我在Meteor中使用Reactive-Table构建一个可排序表，但无法使用我的删除按钮来删除表中的条目。

请参阅下面的javascript代码：

Movies = new Meteor.Collection("movies");

if（Meteor.isClient）{

Template.body.events({
    "submit .new-movie": function (event) {
        var title = event.target.title.value;
        var year = event.target.year.value;
        var genre = event.target.genre.value;

        Movies.insert({
            title: title,
            year: year,
            genre: genre
        });

        event.target.title.value = "";
        event.target.year.value = "";
        event.target.genre.value = "0";

        return false;
    }
});

Template.moviestable.events({
    "click .deletebtn": function (event) {
        Movies.remove(this._id);
    }
});

  Template.moviestable.helpers({
      movies : function () {
        return Movies.find();
      },

      tableSettings : function () {
        return {
            showFilter: false,
            fields: [
                { key: 'title', label: 'Movie Title' },
                { key: 'year', label: 'Release Year' },
                { key: 'genre', label: 'Genre' },
                { key: 'edit', label: 'Edit', fn: function () { return new Spacebars.SafeString('<button type="button" class="editbtn">Edit</button>') } },
                { key: 'delete', label: 'Delete', fn: function () { return new Spacebars.SafeString('<button type="button" class="deletebtn">Delete</button>') } }
            ]
        }
      }
  });

}

谁能告诉我我做错了什么？

Answer 1

在reactive tables docs中，有一个如何从表中删除行的示例。根据您的需要调整文档中的示例，您的活动应如下所示：

Template.moviestable.events({
  'click .reactive-table tbody tr': function (event) {
    event.preventDefault();
    var objToDelete = this;
    // checks if the actual clicked element has the class `deletebtn `
    if (event.target.className == "deletebtn") {
     Movies.remove(objToDelete._id)
    }
  }
});

您遇到的问题是您尝试在按钮单击时找到_id属性而不是行单击。

如果您对按钮点击事件进行了console.log(this)（正如您在上面的问题中所做的那样），您将得到类似Object {key: "delete", label: "", fieldId: "2", sortOrder: ReactiveVar, sortDirection: ReactiveVar}的内容，其中不包含属性_id

注册行单击更容易，行对象是您要删除的实际文档，然后检查事件的目标是否包含您添加的删除类。

无法使用reactive-table在Meteor中创建删除按钮

1 个答案: