Meteor中如何访问DOM？

Question

Meteor 应用程序，新闻聚合器。 Mongo DB 结构：

{_id: channelId, title: channelTitle, pubDate: channelPubdate, items: [{title: newsTitle, desc: newsDescription, link: newsLink, pubDate: Date, clicks: 0}, {}, {} ...] }

{_id: channelId, title: channelTitle, pubDate: channelPubdate, items: [{title: newsTitle, desc: newsDescription, link: newsLink, pubDate: Date, clicks: 0}, {}, {} ...] }

...等

模板：

<template name="newsItems">
{{#each itemsList}}
    {{#each this.items}}
        <article class="news-body-custom" onmousedown="return false" onselectstart="return false">
            <div class="news-content-left">
                <h2 class="news-header-custom">{{this.title}}</h2>
                <time class="time-custom">{{dateTranslate this.pubDate}}</time>
                <p class="news-content-custom">{{{this.description}}}</p>
            </div>

            <div class="clicks">{{this.clicks}}</div>
        </article>
    {{/each}}
{{/each}}

事件处理程序：

    Template.newsItems.events({
    "click .news-body-custom": function(e) {
        var iframe = document.getElementsByName("news-iframe")[0];
        iframe.src = this.link;

        var target = e.target;

        while (target.className !== "news-body-custom") {
            target = target.parentNode;
        }

        var clicks = target.getElementsByClassName("clicks")[0];
        clicks.innerHTML = +clicks.innerHTML + 1;
debugger;
        News.update({ _id: Session.get("channelId"), items: { $elemMatch: { link: this.link }}}, {$inc: {clicks: 1 }});
    }
});

我有两个问题：

1. 如何在此事件处理程序中访问 DOM 结构（模板）？我使用本机 JS 解决了这个问题 - 找到目标，然后找到与目标关联的元素。我认为这并不优雅。是否存在 Meteor 方式？

2. 我需要在 Mongo 中通过增加此字段来保存点击次数。我怎么能做到这一点？我试试这个 News.update({ _id: Session.get("channelId"), items: { $elemMatch: { link: this.link }}}, { $inc: {clicks: 1 }});但这行不通。

谢谢你，新年快乐！

Answer 1

试试这个，模板事件函数给你一个事件和一个模板对象来处理：

Template.newsItems.events({
  "click .news-body-custom": function(e, t) {
    iframe = t.$.find('news-iframe')[0];
    iframe.src = this.link;

    var target = e.target;

    while (target.className !== "news-body-custom") {
        target = target.parentNode;
    }

    var clicks = target.getElementsByClassName("clicks")[0];
    clicks.innerHTML = +clicks.innerHTML + 1;
    debugger;
    News.update({ _id: Session.get("channelId"), items: { $elemMatch: { link: this.link }}}, {$set: {"items.$": {$inc: {clicks: 1 }}}});
  }
});

您还需要确保查看 Mongo 中的 $ 位置更新程序：http://docs.mongodb.org/manual/reference/operator/update/positional/。

Answer 2

1。 我使用的方法是

'csubmit form':function(e){
     e.preventDefault();
     $(e.target).find('[name=test]');//something like that
}

1. 点击不会追加，因为您的查找会返回整个新闻，而不仅仅是带有点击的数组，IMO 您应该创建另一个集合来保存这些项目，例如：

{_id: channelId, title: channelTitle, pubDate: channelPubdate, items:[id1, id2, id3]}

{{#each news}}
   {{#each Item}}

   {{/each}}
{{/each}}

和助手（让它快点，prolly有更好的方法来做到这一点）

Item: function(){
  var array=[];
  for(var i=0;i<this.items.length;i++)
     array.append(Items.find({_id:this.items[0]})) 
  return array;
}

然后在遍历每个项目时执行以下操作：

'click button': function(){
       Items.update({_id:this._id},{$inc:{clicks:1}});
}