Question

在我当前的项目中，用户可以创建帖子，并在页面上迭代每个帖子。

我遇到了冲突类的问题。

我有一个包含attend类的复选框，但它与其他帖子以及我创建的'click .attend'函数冲突。

有没有办法为每个帖子创建一个独特的课程？

我尝试过：

<input type="checkbox" id="check" class="{{this._id}}" checked="" />

但功能不允许

'click .this._id'

我被困在该做什么。

Answer 1

听起来你会以一种错误的方式解决它。您可以拥有相同的类，但您需要为每个帖子添加模板。该模板可以轻松访问该模板的每个实例的正确类。

    <head>
  <title>demosub</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> allposts}}

</body>
<template name="allposts">
   {{#each posts}}
      {{> thepost }}
   {{/each}}
</template>

<template name="thepost">
   <div>
     <span>{{_id}}</span>
      <input type="checkbox" class="attend" checked="" />
    </div>
</template>

然后在你的模板'thepost'

的事件代码中

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';


Template.allposts.helpers({
  posts() {
    return [{_id: 1}, {_id: 2}]
  },
});

Template.thepost.events({
  'click .attend': function(e,t){
    var data = Template.instance().data  // this is your post...
    console.log(e.toElement.checked)
    console.log(data)
  }
})

在下面的

中，您可以看到我点击每个复选框的位置以及它如何知道点击了哪个帖子： -

模板事件知道类“attend”上的click事件与模板的实例相关联并调用该事件处理程序。

Answer 2

您不需要为每个帖子创建一个类。看看Meteor todos tutorial - update & remove

这可能是您的HTML输入

<input type="checkbox" class="yourcheckboxclass" checked="{{checked}}"/>

这可能是您的Javascript代码

'change [type=checkbox]': function(e, tpl) {
     // Here you can access your post data with 'this' and use it 
     // to do what you want.
     console.log(this._id)
     }

注意：请勿对每个帖子使用id="check"，因为您的HTML中会有多个具有相同ID的项目。

流星火焰 - 在类之间进行区分

2 个答案: