2014-11-03 3 views
0

Я использую Reactive-Table для отображения данных, сохраненных в моем приложении Meteor, как показано на рисунке ниже, в каждой строке таблицы есть ссылка для редактирования документа, относящегося к этой строке. Я пытаюсь использовать ссылку на клик «click event», чтобы захватить _id документа, связанного с выбранной строкой, но, похоже, не может получить _id, кто-то может проверить мой код и сообщить мне, чего я не вижу/делаю неправильно здесь и как захватить _id? БлагодарностиMeteor retriving document _id из реактивной таблицы

customerslist.html

<template name="customerslist"> 
    <div class="customerslist"> 
    <div class="page-header"> 
     <h1>Customers List</h1> 
    </div> 

    <div> 
     {{> reactiveTable class="table table-bordered table-hover" collection=customersCollection settings=settings}} 
    </div> 
    </div> 
</template> 

customerslist.js

Template.customerslist.helpers({ 
    customersCollection: function() { 
     return Customers.find({},{sort: {title: 1}}); 
    }, 
    settings: function() { 
     return { 
      rowsPerPage: 10, 
      showFilter: true, 
      showColumnToggles: false, 
      fields: [ 
      { key: 'name', label: 'Customer Name' }, 
      { key: 'email', label: 'Email' },   
      { key: 'phone', label: 'Phone' }, 
      { key: '_id', label: 'Action', sortByValue: false, fn: function(_id){ return new Spacebars.SafeString('<a name="' + _id +'" class="edtlnk" target="_blank" href="' + _id + '/edit"> Edit </a>'); } } 
     ] 
     }; 
    } 
}); 

Template.customerslist.customers = function() { 
    return Customers.find({},{sort: {title: 1}}); 
}; 

Template.customerslist.events({  
    'click .edtlnk': function(e) { 
     var cust = this; 
     event.preventDefault(); 
     console.log('Customer ID: '+cust._id);  
    }   
}); 

ответ

0

Я не знаю, Метеор, хотя я начинаю играть с ним, так что я не забочусь о вверх или вниз голосует вообще, но изучает ответ на ваш вопрос.

Я нашел документы Карты событий, который я уверен, что вы видели, как хорошо: https://docs.meteor.com/#/full/eventmaps

Это был включен в документ:

{ 
    'click p': function (event) { 
    var paragraph = event.currentTarget; // always a P 
    var clickedElement = event.target; // could be the P or a child element 
    } 
} 

Если селектор сопоставляется несколько элементов, событие пузырится, оно будет вызываться несколько раз, например, в случае «нажмите div» или «щелкните *». Если селектор не указан, обработчик будет вызываться только один раз, на исходном целевом элементе.

следующие свойства и методы доступны на объект события передается обработчики:

типа String, типа мероприятия, такие как «нажмите», «размывание» или «нажатие клавиши».

target DOM Element Элемент, который инициировал событие.

currentTarget DOM Element Элемент, обрабатывающий событие в данный момент. Это элемент, который соответствует селектору в карте событий. Для событий, которые пузырятся, это может быть цель или предок цели, а ее значение изменяется как пузырь событий.

Мне кажется, что поскольку объекты target и currentTarget являются элементами DOM, вы не можете получить то, что вам нужно, или вы ссылаетесь на _id, доступный в Meteor, на обратный вызов вставки?

3

Как пакет устанавливает контексты данных, this будет установлен только для объекта-клиента, если селектор событий соответствует элементу tr. Это делает event.currentTarget tr, но event.target все еще является ссылкой на редактирование.

Вы могли бы попробовать что-то вроде этого:

Template.customerslist.events({  
    'click .customerslist tr': function(e) { 
     if ($(e.target).hasClass('edtlnk')) { 
      var cust = this; 
      e.preventDefault(); 
      console.log('Customer ID: '+cust._id); 
     } 
    }   
}); 
Смежные вопросы