javascript - 如何从客户端通过点击功能选择要插入和更新的子文档

我有两个集合，一个是 Posts 集合，其中包含帖子，并带有 id。

另一个是 Sets 集合，其中有一个名为 ArticleId 的数组，用户可以通过插入帖子 ID 来更新该数组通过使用按钮 toggle-addToSet.

的点击功能将 Posts 集合放入其中。

用户创建名为ArticleId的数组，为其命名并定期在其中保存文章。 想想 Pinterest Board 或 G+ 收藏。

我在帖子项目上有一个按钮，当用户单击该图标时，他创建的所有集都会出现在对话框中，并且用户选择他想要保存帖子 ID 的集进入。

<template name="summeryArticle">
<li>
  <div class="row col s12 m7">
    <div class="card" id="cardId">
      <div class="card-image waves-effect waves-block waves-light">
        <a href="/latestSingle/{{_id}}"><img src="{{better_featured_image.source_url}}"></a>
      </div>
      <div class="card-content">
        <h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
        <a href="/latestSingle/{{_id}}">MORE</a> <a href="#modal2" class="modal-trigger waves-effect waves-light" onclick="Materialize.showStaggeredList('#bottom-options')"><i class="waves-effect waves-teal small material-icons right">playlist_add</i></a>{{>
        likePartial}}{{> reblogPartial}}
        <!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in  -->
        <div id="modal2" class="modal bottom-sheet">
          <div class="modal-content">
            <div class="row">
              {{#each set}}
              <div class="col s6 m6 addSet teal">
                <div class="card ">
                  <div class="card-image">
                    <span class="card-title cardSet">{{name}}</span>
                  </div>
                  <div class="card-footer">
                    <button type="button" class="btn toggle-addToSet" name="button">add Article Id to this Set!</button>
                  </div>
                </div>
              </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
</template>

从图形上看，它看起来像这样

当用户单击图标modal-trigger来调出他创建的集合时，它看起来像这样

正如您所看到的，用户有三个集合，生活方式、爱情、商业，他们可以选择将帖子ID保存到这三个集合中的任何一个中。

## 目标##

我希望能够选择一个集合，单击我选择的集合的添加按钮，并以某种方式在 foreach 循环中捕获当前帖子的帖子 ID ，然后通过点击功能将其插入，目前我所拥有的就是这个

Template.summeryArticle.events({
  'click .toggle-addToSet': function(e, template) {
    var ob = this.id
    console.log(ob);
  }
});

当我通过控制台记录该信息时，我只得到设置 ID，而不是帖子 ID。

问题

如何捕获当前帖子的帖子 ID，
选择我喜欢的集合，然后将帖子 ID 插入我选择的集合中？

如果有更好的方法来实现这一目标，请告诉我。

<小时/>

反馈后编辑

我这样做了第二个选项

<template name="summeryArticle">
{{#let article=this}}
<li>
  <div class="row col s12 m7">
    <div class="card" id="cardId">
      <div class="card-image waves-effect waves-block waves-light">
        <a href="/latestSingle/{{_id}}"><img src="{{better_featured_image.source_url}}"></a>
      </div>
      <div class="card-content">
        <h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
        <a href="/latestSingle/{{_id}}">MORE</a> <a href="#modal2" class="modal-trigger waves-effect waves-light" onclick="Materialize.showStaggeredList('#bottom-options')"><i class="waves-effect waves-teal small material-icons right">playlist_add</i></a>{{>
        likePartial}}{{> reblogPartial}}

        <!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in  -->

        <div id="modal2" class="modal bottom-sheet">
          <div class="modal-content">
            <div class="row">
              {{#each set}}
              <div class="col s6 m6 addSet teal">
                <div class="card ">
                  <div class="card-image">
                    <span class="card-title cardSet">{{name}}</span>
                  </div>
                  <div class="card-footer">
                    {{#each s in set}}
                    <button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button> {{/each}}
                  </div>
                </div>
              </div>
              {{/each}}
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</li>

{{/let}}
</template>

我的 helper 是这样的

Template.summeryArticle.events({
  'click .toggle-addToSet': function(e, template) {
    var ob = this
    console.log(ob);
    var sid = $(e.currentTarget).data('setid');
    var aid = $(e.currentTarget).data('articleid');
    console.log(sid);
    console.log(aid);
  }
});

但是，这就是我得到的。

日志看起来像这样

其中 7MgLCEnTWjXFRhLg6 是 Sets_id，具体取决于我单击的三个按钮中的哪一个

<小时/>

第二次编辑。上下文

当我这样做时

<template name="summeryArticle">
{{#let article=_id}}
<li>
  <div class="row col s12 m7">
    <div class="card" id="cardId">
      <div class="card-image waves-effect waves-block waves-light">
        <a href="/latestSingle/{{_id}}"><img src="{{better_featured_image.source_url}}"></a>
      </div>
      <div class="card-content">
        <h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
        <a href="/latestSingle/{{_id}}">MORE</a> <a href="#modal2" class="modal-trigger waves-effect waves-light" onclick="Materialize.showStaggeredList('#bottom-options')"><i class="waves-effect waves-teal small material-icons right">playlist_add</i></a>{{> likePartial}}{{> reblogPartial}}

<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in  -->

        <div id="modal2" class="modal bottom-sheet">
          <div class="modal-content">
            <div class="row">
              {{#each s in set}}
                <div class="col s6 m6 addSet teal">
                  <div class="card ">
                    <div class="card-image">
                        <span class="card-title cardSet">{{name}}</span>
                    </div>
                    <div class="card-footer">

                  <button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button>

                    </div>
                  </div>
                </div>
                    {{/each}}
              </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</li>
{{/let}}
</template>

我明白了

这里发生的情况是，我将文章按类别组织起来，所以现在发生的情况是，捕获的 article=_id 是该类别中的最后一篇文章，无论我的文章是什么尝试添加，这只是一篇文章被捕获，而且它总是位于底部的一篇。我不知道为什么

最佳答案

有几种方法。其中之一是这样的:

我只想将文章 id 并将 id 设置为toggle-addToSet 按钮的数据属性:

<button type="button" class="btn toggle-addToSet" name="button" data-setid="SETID" data-articleid="ARTID">add Article Id to this Set!</button>

如果你这样称呼你的summeryArticle:

{{#each article in articles}}
 {{>summeryArticle article=article}}
{{/each}}

(另一个选项是使用 let-helper:

<template name="summeryArticle">
{{#let article=this}}
...
{{/let}}
</template>

然后在你的summeryArticle-template中你可以在sets-loop中获取文章id:

{{#each s in set}}
                    <button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}>add Article Id to this Set!</button>
{{/each}}

然后在模板事件中:

Template.summeryArticle.events({   
 'click .toggle-addToSet': function(e, template) {
    var ob = this.id
    console.log(ob);
    var sid = $(e.currentTarget).data('setid');
    var aid = $(e.currentTarget).data('articleid');
    Sets.update({_id: sid}, {$addToSet: {ArticlesId: aid}});   
  } 
 });

注意!

这假设您可以直接从客户端更新您的集合!根据您的情况而定，但通常不建议这样做。通常您应该拒绝客户端更新并使用更新集合的方法:

Method.call('mymethd', sid, aid, function(e, r) {
 if (!e) { 
  console.log(r);
 } else {
  console.error(e);
 }
});

关于javascript - 如何从客户端通过点击功能选择要插入和更新的子文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44104311/

javascript - 如何从客户端通过点击功能选择要插入和更新的子文档

问题

反馈后编辑

第二次编辑。上下文

上一篇：javascript - 从对象将值设置为变量后无法获取值

下一篇：javascript - ngMaterial 和 ngRoute 一起打破应用程序