2017-02-20 26 views
1

В моем текущем проекте пользователь может создать сообщение, и каждое сообщение повторяется на странице.Meteor Blaze - Дифференциация между классами

Я столкнулся с проблемой конфликтующих классов.

У меня есть флажок, который имеет класс attend, однако он конфликтует с другими сообщениями и с функцией 'click .attend', которую я создал.

Есть ли способ создать уникальный класс для каждого сообщения?

Я пробовал делать:

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

но функция не позволяет

'click .this._id' 

я застрял на том, что делать.

ответ

0

Похоже, вы идете об этом немного ошибочно. Вы можете иметь один и тот же класс, но вам нужно разместить шаблон для каждого сообщения. Этот шаблон может легко получить правильный класс для каждого из экземпляров этого шаблона.

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

ниже вы можете увидеть, где я нажимаю на каждом из флажка и как она знает, какую должность он нажал на: -

enter image description here

шаблон событие знает, что событие щелчка на классе «присутствовать» связан с экземпляром шаблона и вызывает обработчик события.

+0

У меня уже есть первая часть. Тем не менее, я не совсем понимаю вторую часть вашего кода! – DarkTakua

+0

который бит, событие? –

+0

Да, эта часть. – DarkTakua

0

Вам не нужно создавать класс для каждого сообщения. Посмотрите на 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.