第二次点击时,流星模板错误的数据 - *。这是一个错误吗?

时间:2015-04-21 06:15:44

标签: javascript jquery templates meteor

这也是一个未解决的问题:https://github.com/meteor/meteor/issues/4231

短篇小说

在这里你可以看到问题的演示(按ADD一次,然后按第一个X多次..只有第一个会删除记录。然后尝试使用第二个按钮来解决同一个问题): http://bug-event-template.meteor.com

此处源代码为:https://github.com/brugnara/meteor-bug-event-template

长篇故事

我有一个模板,用于呈现存储在Session

中的对象数组

你可以尝试自己。按ADD按钮,您将看到一个带有红色标记的项目列表,该项目应该删除当前项目,并且在您第一次按下它时它会起作用。我第二次收到错误,说id不存在。通过检查员,我可以看到data-id=RAND并且它是正确的。唯一错误的是第二次按下按钮时.data('id')功能的结果。我真的无法理解发生了什么。这可能是某个地方的错误吗? (请参阅*****签名注释。获取的值是错误的,但其他任何内容都可以正常显示,即DEBUG {{id}}正确显示,并且检查员显示正确设置的数据ID。在我看来{ {1}}例程在某些时候失败,或者只是我在代码中出现问题:))

感谢您的关注。

管理器:

event

模板

var MESSAGE_QUERIES = 'messages:queries';
var MESSAGE_CURRENT = 'messages:current';

Template.messagesNew.helpers({
  queries: function() {
    return Session.get(MESSAGE_QUERIES);
  }
});

Template.messagesNew.events({
  'keyup #message-new-text': function(e) {
    var $len = $('#message-new-text-length');
    var $text = $(e.target);
    var len = $text.val().length;
    $len.html(len === 0 ? '' : len + (len === 1 ? ' char' : ' chars'));
  },

  'click .query-add': function(e) {
    e.preventDefault();
    var id = chance.word({ length:16 });
    var queries = Session.get(MESSAGE_QUERIES);
    if (!queries) {
      queries = [];
    }
    queries.push({
      id: id
    });
    Session.set(MESSAGE_QUERIES, queries);
  },

  'click .btn-remove': function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var $target = Template.instance().$(e.currentTarget);
    var id = $target.data('id'); // ************* This is wrong any click but first
    TARGET = $target; // for debug only
    var queries = Session.get(MESSAGE_QUERIES);
    var toRemove = -1;
    $target.blur();
    //
    queries.forEach(function(query, index) {
      if (query.id === id) {
        toRemove = index;
      }
    });
    if (toRemove === -1) {
      return console.warn('Nothing found with id:', id);
    }
    console.log('Removing query with id:', id, 'in position:', toRemove);
    queries.splice(toRemove, 1);
    Session.set(MESSAGE_QUERIES, queries);
  }
});

谢谢。

1 个答案:

答案 0 :(得分:1)

我认为你以错误的方式使用Meteor。您应该了解您所处的数据上下文。 使用{{#each queries}},您可以将循环的数据上下文设置为每个元素。 因此,在您的活动'click .btn-remove'中,您应该可以使用this.id直接获取ID,而不是使用数据属性。像这样:

{{#each queries}}
  <div>
    ...
    <div class="btn-remove">X</div>
  </div>
{{/each}}

在模板事件中:

Template.messagesNew.events({
  'click .btn-remove': function(e) {
    var queryId = this.id; //get the current item id with this.id

    //then do whatever you want based on the queryId you got
    ...
  }
});