Meteor Blaze - 区分类

Question

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

我运行陷入classes冲突的问题。

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

有没有办法为每个 post 创建一个唯一的 class？

我试过：

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

但函数不允许

'click .this._id'

我不知道该怎么做。

Answer 1

听起来你的做法有点不对。您可以拥有相同的 class，但您需要为每个 post 放置一个模板。该模板可以轻松地为该模板的每个实例找到正确的 class。

    <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)
  }
})

您可以在下面看到我在每个复选框上单击的位置以及它如何知道单击了哪个 post :-

模板事件知道 class "attend" 上的点击事件与模板的一个实例相关联并调用该事件处理程序。

Answer 2

您不需要为每个 post 创建一个 class。看看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)
     }

注意：不要对每个 post 使用 id="check"，因为您的 HTML.[=23= 中会有多个具有相同 ID 的项目]

Meteor Blaze - 区分类

Meteor Blaze - Differentiating Between Classes

javascript

mongodb

meteor

meteor-blaze

Meteor Blaze - 区分 类

Meteor Blaze - Differentiating Between Classes

javascript

mongodb

meteor

meteor-blaze

Meteor Blaze - 区分类