2つの流星テンプレートの間でデータをプッシュ

私は単純な流星アプリを持っていて、title、text、および_idのポストを作成する簡単なフォームを持つボディテンプレートを持っています。投稿を作成すると、更新ボタンを含む投稿テンプレートがレンダリングされます。 JavaScriptの側（クライアント）で、私はそうのような方法があります：2つの流星テンプレートの間でデータをプッシュ

'click .update'(event){ 
    event.preventDefault(); 

    const target = event.target; 
    post = Post.find({_id: this._id}).fetch(); 
    //send post's data to the body template so it can be rendered and updated by the user 
}

基本的に私は、私は身体テンプレートのインスタンスにアクセスし、それがtitle、text、および_id値だ設定可能な何かをしたいです。私はTemplate.instance()を試しましたが、これらの変数は含まれていないようです。

どうすればいいですか？ユーザーは更新をクリックして、投稿を作成するのに使用するのと同じフォームで情報を編集できるはずです（既に存在する投稿を作成するのではなく、更新するためにupsertを使用しています）。

テンプレートと

htmlファイル：更新機能について

<body> 
    <div class="container"> 
    <header> 
     <h1>Post List</h1> 
     <form class="new-post"> 
     <input type="text" name="title" placeholder="Post Title" /> 
     <input type="text" name="text" placeholder="Post Body" /> 
     <input hidden name="_id" /> 
     <button value="Create">Create</button> 
     </form> 
    </header> 

    <ul> 
     {{#each posts}} 
     {{> post}} 
     {{/each}} 
    </ul> 
    </div> 
</body> 

<template name="post"> 
    <li> 
    <ul> 
     <li>{{_id}}</li> 
     <li>{{title}}</li> 
     <li>{{text}}</li> 
     <li><button class="update" value="Update {{id}}" id='{{id}}'>Update</button></li> 
     <li><button class="delete" value="Delete {{id}}" id='{{id}}'>Delete</button></li> 
    </ul> 
    </li> 
</template>

ロジック：

Template.body.events({ 

'click .update'(event){ 
    event.preventDefault(); 
    console.log("post id number: " + this._id); 
    const target =Template.instance();//I need to get the instance of the body template here (where posts are created) 
    posts = Posts.find({_id: this._id}).fetch(); 
    target.title.value=posts[0].title; 
    target.text.value=posts[0].text; 
    target._id.value=posts[0]._id; 

} 
});

は明らかに他の機能があまりにもあります...

出典

2016-08-16 Silvertail

Template.instance（）の代わりにイベントのテンプレートパラメータを使用します。詳細については、この記事をご覧ください：http://stackoverflow.com/a/35657873/1689286 – Jeremiah

確かに、THATテンプレートのパラメータにアクセスするには最適ですが、別のテンプレートのパラメータにアクセスする必要があります。テンプレートは、HTMLの全く異なるブロックとして定義されています。 – Silvertail

これらのテンプレートは同じファイルに置かれているのでしょうか？テンプレート（適切な部分）を投稿できますか？ – Jeremiah

まずにreactiveVar（please read the reactiveVar docs）を設定更新をクリックするとフォームデータを保持します。

（また、イベントを投稿する身体click .updateイベントを動かす）

const post = new ReactiveVar({}); // Set it at the top of your js. 

Template.body.events({ 

}); 

Template.post.events({ 
    'click .update'(event){ 
    event.preventDefault(); 
    post = Posts.find({_id: this._id}).fetch(); 
    post.set(post); 
    } 
});

今、あなたはポストの更新ボタンをクリックするたびに、あなたはpost reactiveVarにそのポストからのデータを入れます。

次に、postFormと呼ばれる別のテンプレートの内側に投稿フォームを置く：

<body> 
    <div class="container"> 
    <header> 
     <h1>Post List</h1> 
     {{> postForm}} 
    </header> 

    <ul> 
     {{#each posts}} 
     {{> post}} 
     {{/each}} 
    </ul> 
    </div> 
</body> 

<template name="postForm"> 
    {{#with post}} 
    <form class="new-post"> 
     <input type="text" name="title" placeholder="Post Title" value="{{title}}"> 
     <input type="text" name="text" placeholder="Post Body" value="{{text}}"> 
     <input hidden name="_id" value="{{_id}}"> 
     <button value="Create">Save</button> 
    </form> 
    {{/with}} 
</template> 

<template name="post"> 
    <li> 
    <ul> 
     <li>{{_id}}</li> 
     <li>{{title}}</li> 
     <li>{{text}}</li> 
     <li><button class="update" value="Update {{id}}" id='{{id}}'>Update</button></li> 
     <li><button class="delete" value="Delete {{id}}" id='{{id}}'>Delete</button></li> 
    </ul> 
    </li> 
</template>

お知らせ{{#with post}}の使用。この例では、postはテンプレート内のpost reactVarにアクセスできるように作成する必要のあるヘルパーに過ぎません。また、各入力値にハンドルバーを使用することにも注意してください。

Template.postForm.helpers({ 
    post: function(){ 
     return post.get(); 
    } 
});

出典

2016-08-17 14:33:10 Jeremiah

2つの流星テンプレートの間でデータをプッシュ

答えて

関連する問題