Возвращение массива поддокументов через Метеор / Монго

У меня возникли небольшие проблемы с возвратом и отображением тегов, которые я добавляю в поддокумент. У меня нет проблем с добавлением тегов, но я хочу поставить ярлык на элемент для каждого тега. Я просто не могу найти ресурс, который помогает мне возвращать элементы в массиве внутри вложенного документа. Я думаю, что это все помощник, где я застрял - в основном синтаксически правильный способ написать "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");
Другие вопросы по тегам