2017-02-20 10 views
1

私の現在のプロジェクトでは、ユーザーは投稿を作成し、各投稿はページ上で繰り返されます。流星火災 - クラス間の区別

私は矛盾するクラスの問題にぶつかります。

私はそれは他の記事で、私が作成した'click .attend'機能と競合しかしクラスattendを持っているチェックボックスを持っています。

投稿ごとに独自のクラスを作成する方法はありますか?

私がやって試してみました:

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

をしかし機能は

'click .this._id' 

私が何をすべきかに立ち往生していますことはできません。

答えて

0

あなたはちょっと間違ったやり方でそれをやっているようですね。あなたは同じクラスを持つことができますが、必要なことは各投稿のテンプレートを置くことです。そのテンプレートは、そのテンプレートの各インスタンスに対して、適切なクラスに簡単にアクセスできます。テンプレート「thepost」のあなたのイベントコードで、その後

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

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

私はすでに最初の部分としてセットアップしています。しかし、私はあなたのコードの第2部分を完全に理解していません! – DarkTakua

+0

どのビット、イベント? –

+0

そうそう。 – DarkTakua

0

投稿ごとにクラスを作成する必要はありません。あなたが持つことになりますので、各ポストのためid="check"を使用しないでください:これはこれはあなたの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) 
    } 

NOTE可能性があり、あなたのHTML入力

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

可能性がありMeteor todos tutorial - update & remove

を見てみましょうあなたのHTMLに同じIDを持ついくつかの項目。