推送兩個流星模板之間的數據

我有一個簡單的流星應用程序，它具有一個簡單的表格，用於創建title,text和_id的帖子。當我創建帖子時，它會在包含更新按鈕的帖子模板中呈現。在JavaScript端（客戶端），我有這樣一個方法，以便：推送兩個流星模板之間的數據

'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 reactiveVar。另外，請注意每個輸入值中使用的把手。

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

來源

2016-08-17 14:33:10 Jeremiah

推送兩個流星模板之間的數據

回答

相關問題