Возвращение массива поддокументов через Метеор / Монго
У меня возникли небольшие проблемы с возвратом и отображением тегов, которые я добавляю в поддокумент. У меня нет проблем с добавлением тегов, но я хочу поставить ярлык на элемент для каждого тега. Я просто не могу найти ресурс, который помогает мне возвращать элементы в массиве внутри вложенного документа. Я думаю, что это все помощник, где я застрял - в основном синтаксически правильный способ написать "Items.(This._id).itemTags.find();":)
О - и я вырезал много HTML и JS, но, да, все остальное работает нормально. Коллекция - "Items", а вложенный документ - "itemTags", для которого во время вставки устанавливается "itemTags: []". В моей тестовой среде я могу добавить "Cats" и "Dogs" в качестве тегов и убедиться, что они работают, проверяя объекты с помощью "Items.find(). Fetch();" но я изо всех сил пытаюсь показать их.
HTML:
<template name="item">
{{#each itemTags}}
<span class="label label-default">{{itemTag}}</span>
{{/each}}
</template>
JS:
Template.item.helpers({
itemTags: function() {
var currentUserId = Meteor.userId();
return Items.find(); // yes, this line is completely wrong, but I'm lost hehe
}
});
Template.item.events({
'submit .add-tag': function(event) {
event.preventDefault();
var itemTag = event.target.text.value;
Items.update(this._id, {$push: {itemTags: itemTag}});
event.target.text.value = "";
return false;
}
});
Схема базы данных (как показано моей командой вставки):
var item = {
itemText: $(e.target).find('[name=itemText]').val(),
createdAt: new Date(),
createdBy: currentUserId,
hard: false,
difficulty: 'easy',
checked: false,
itemTags: [],
};
item._id = Items.insert(item);
2 ответа
Ваша единственная проблема - попытаться перебрать курсор и вложенный массив в одном и том же блоке. Если вы отделяете свой items
шаблон и индивидуальный item
шаблон, вы получите желаемый результат.
Ради упрощения я изменил ваш код так:
Это ваше основное тело:
<body>
{{> items}}
</body>
<template name="items">
{{#each items}}
{{> item}}
{{/each}}
</template>
<template name="item">
<h2>{{itemText}} tags are:</h2>
<ul>
{{#each itemTags}}
<li>{{this}}</li>
{{/each}}
</ul>
</template>
А это твой помощник
Template.items.helpers({
items: function () {
return Items.find();
}
})
Предполагая, что документ элемента выглядит следующим образом:
{
itemText: String,
itemTags: Array
}
Я создал приложение на Meteorpad, чтобы вы могли поиграть с:
http://meteorpad.com/pad/BmRQ5fkwWEMBKszJW/SO-27951102
Вы можете дополнительно изменить код и увидеть изменения в режиме реального времени. Это в основном jsfiddle для метеора.
Редактировать: вдохновленный комментарием @chip-castle, вы можете использовать один шаблон с вложенным each
блоки:
<template name="items">
{{#each items}}
<h2>{{itemText}} tags are:</h2>
<ul>
{{#each itemTags}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/each}}
</template>
Но использование отдельных шаблонов более гибко как при разработке, так и при обработке событий, где это необходимо.
У вас есть настройка публикации и подписки?
сервер /publications.js
Items = new Mongo.Collection("items");
Meteor.publish("items", function () {
return Items.find({});
});
клиент /subscriptions.js
Items = new Mongo.Collection("items");
Meteor.subscribe("items");