Нажмите данные между двумя метеорными шаблонами

У меня есть обычное приложение для метеорита с шаблоном тела, которое имеет простую форму для создания сообщения с title, text и _id. Когда я создаю сообщение, он отображает в шаблоне сообщения, который включает кнопку обновления. На яваскрипте стороны (клиент), у меня есть метод, как так:Нажмите данные между двумя метеорными шаблонами

'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

Нажмите данные между двумя метеорными шаблонами

ответ

Смежные вопросы