Могу ли я передать значение this._id из одного помощника шаблона другому с помощью Meteor?

Question

У меня есть следующие шаблоны (.html) с их уважаемых менеджеров (.js файлы):

• adminManageCategories
• adminAddCategory
• adminUpdateCategory

Рассмотрим следующий пример:

<template name="adminManageCategories"> 
    {{#each category}} 
     <div class="clickme">{{title}}</div> 
    {{/each}} 

    {{> adminUpdateCategory}} 
</template> 

Обратите внимание, что {{> adminUpdateCategory}} вне итерации. Это также форма, и я хочу сохранить ее на одной странице.

И admin_manage_categories.js

Template.adminManageCategories.events({ 
    "click .clickme": function(event) { 
     event.preventDefault(); 
     console.log(this._id); 
    } 
}); 

Обратите внимание на функцию console.log(), который работает, как менеджер шаблонов, достаточно умен, чтобы знать идентификатор элемента, который был щелкнули.

Что я хочу сделать, это загрузить эти значения элементов в форму при нажатии. Мой пример выше тонкий, но в моих реальных данных у меня есть название, порядок сортировки, между прочим.

Так что мой вопрос в том, что было бы правильным способом передать _id из шаблона adminManageCategories в шаблон adminUpdateCategory, который является формой.

Я могу взломать это с помощью javascript и сделать все, но я думаю, что мне не хватает «метеорного пути».

Я ценю помощь. Спасибо.

Answer 1

Чтобы сохранить выбранный элемент, вам необходимо использовать ReactiveVar.

Сначала вам нужно запустить meteor add reactive-var, так как это не пакет, добавленный по умолчанию в стандартное веб-приложение метеора.

JS:

Template.adminManageCategories.created=function(){ 
    // instantiate the reactive-var in the created callback 
    // we store it as a property of the template instance 
    this.currentItemId=new ReactiveVar(null); 
}; 

Template.adminManageCategories.helpers({ 
    // this helper reactively returns the currently clicked item 
    currentItem:function(){ 
    // retrieve the reactive-var from the template instance... 
    var currentItemId=Template.instance().currentItemId.get(); 
    // ...to fetch the correct collection document 
    return Items.findOne(currentItemId); 
    } 
}); 

Template.adminManageCategories.events({ 
    "click .clickme": function(event,template) { 
    event.preventDefault(); 
    // assign the correct item id to the reactive-var attached to this template instance 
    template.currentItemId.set(this._id); 
    } 
}); 

HTML:

<template name="adminManageCategories"> 
    {{#each category}} 
    <div class="clickme">{{title}}</div> 
    {{/each}} 
    <p>Current item title is : {{currentItem.title}}</p> 
    {{! pass the currentItem as a parameter to your child template this will be 
     accessible as {{item}} in the HTML and "this.item" in JS helpers or 
     "this.data.item" in created/rendered/destroyed callbacks}} 
    {{> adminUpdateCategory item=currentItem}} 
</template> 

EDIT:

Когда я инициализировать реактивную-вар в created обратного вызова, я установил его null, это означает, что до e элемент щелкнет, помощник также вернет значение null, и когда вы попытаетесь получить доступ к this.item._id в adminUpdateCategory, это не удастся.

Самый простой способ решить эту проблему - возможно, не инициализировать переменную до нуля, а до первого элемента в коллекции.

Template.adminManageCategories.created=function(){ 
    var firstItem=Items.findOne({},{ 
    sort:{ 
     sortedField:1 
    } 
    }); 
    this.currentItemId=new ReactiveVar(firstItem && firstItem._id); 
}; 

Там все еще может быть случай, когда у вас есть 0 единиц товара в коллекции, так что вы, вероятно, в конечном итоге, для защиты от существования этого элемента в JS.

Template.adminUpdateCategory.helpers({ 
    itemProperty:function(){ 
    return this.item && this.item.property; 
    } 
});