2016-08-01 3 views
0

Я создаю приложение в метеор, и у меня есть код ниже в шаблоне.Как показать значок на клике в метеор?

<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 и хранить их в коллекции. Как я могу это сделать? Я новичок в метеоре. Может ли кто-нибудь помочь мне, как мы можем это сделать, используя Meteor. Заранее спасибо.

ответ

0

Начинайте со скрывать свой #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(); 
    }, 
}); 
+0

Спасибо за ответ. Он отображает значок на клике, но он не попадает на страницу описания при нажатии. Он просто показывает значок. Как мы можем решить эту проблему? – sailu

+0

Ваш оригинальный вопрос просто спросил о показе значка. Когда вы говорите, показываете страницу описания, вы имеете в виду показать раздел описания на текущей странице или фактически перейти на отдельную страницу? Вы пытаетесь показать описание под значком глаза при нажатии? – hwillson

+0

, когда нажимает на одну ссылку, она переходит на страницу описания (маршруты на другую страницу). Поэтому, когда пользователь смотрит, он должен отображать значок глаза рядом со ссылкой. – sailu

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

Смежные вопросы