Question

我正在流星中构建一个应用程序，我在模板中有一个以下代码。

 <h3>
   <b>
     <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
   </b>
   &nbsp;&nbsp;
   <span class="job-type part-time">Part Time</span> 
 </h3>


<div id="eyeIcon">
  <span class="glyphicon glyphicon-eye-open" style="color:green"></span>    
 </div>

我必须在点击href标签时显示glyphicon eye图标并将它们存储到一个集合中。我怎样才能做到这一点？我是流星的新手。任何人都可以帮助我如何使用Meteor来做到这一点。提前谢谢。

Answer 1

<h3>
   <b>
     <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
   </b>
   &nbsp;&nbsp;
   <span class="job-type part-time">Part Time</span> 
 </h3>

{{showIcon}}
<div id="eyeIcon">
  <span class="glyphicon glyphicon-eye-open" style="color:green"></span>    
 </div>
{{/if}}


Template.yourTemplate.helpers({
  'showIcon':  function() {
    return Session.get('showIcon');
  },
});
Template.yourTemplate.events({
  'click .viewed': function(event, instance) {
    event.preventDefault();
    Session.set('showIcon', true);
  },
});

请注意，我已使用会话在整个应用中保留您的数据。如果您还希望永久保留此值，则可以使用集合。

另外，如果你只是保留它在页面刷新时保留的值，那么你可以使用Session.setPersistent（https://github.com/okgrow/meteor-persistent-session）而不是Session.set

Answer 2

默认情况下隐藏#eyeIcon div。例如，将以下内容添加到/client/main.css：

#eyeIcon {
  display: none;
}

然后利用Blaze Template event system在点击链接时显示div。所以在你的模板中：

Template.yourTemplate.events({
  'click .viewed'(event, instance) {
    event.preventDefault();
    instance.$('#eyeIcon').show();
  },
});

如何在流星点击中显示图标？

2 个答案: