Загрузка полей из коллекции в поле выбора и его фильтрация на основе выбранного значения

В основном у меня есть два вопроса, которые связаны, но я разделю их числами 1) я пытаюсь загрузить одно поле в раскрывающийся список выбора из коллекции, но он заполняется всеми повторяющимися значениями, которые он собрал из списка под ним, а не его собственный помощник.

<template name="carsList">

{{> categoryFilter}}

<ul class="collection" id="listings">
{{#each cars}}
<li>
  {{> carItem}}
</li>
{{/each}}
 </ul>
</template>

шаблон категории

<template name="categoryFilter">
 <div class="input-field">
 <select>
   <option value="" disabled selected>Choose your option</option>
    {{#each companyCategories}}
     {{> companyCategory}}
    {{/each}}
 </select>
 <label>Select Category</label>
</div>
</template>

<template name="companyCategory">
  <option>{{ccategory}}</option>
</template>

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

Template.categoryFilter.helpers({
companyCategories: function(){
return Cars.find();
}
});

вместо того, чтобы заполнять свой собственный помощник, он загружает данные, поступающие из «списков» под ним, и повторяет данные.

Изображение результата в поле выбора

2) Я также хочу отфильтровать списки на основе значения, выбранного в раскрывающемся списке выбора (конечно, реактивный)

Пожалуйста помоги

ИЗМЕНИТЬ

Вот так сейчас выглядит мой шаблон

<template name="categoryFilter">
 <div class="input-field">
  <select>
   <option value="" disabled selected>Choose your option</option>
    {{#each companyCategories}}
      {{> companyCategory}}
    {{/each}}
   </select>
 <label>Select Category</label>
 </div>
</template>

<template name="companyCategory">
 <option>{{justCategory}}</option>
</template>

person Neo    schedule 07.06.2015    source источник


Ответы (1)


Вот как бы я поступил. Во-первых, раскрывающийся список: вы должны использовать курсор вместо массива документов. Итак, ваш помощник должен быть:

Template.categoryFilter.helpers({
    companyCategories: function(){
       return Jobs.find();
    }
});

и ваш HTML-шаблон categoryFilter может быть примерно таким

<template name="categoryFilter">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    {{selectedCategory}} <!-- refer to an helper which returns the reactive variable--> 
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  {{#each companyCategories}}
    <li role="presentation"><a role="menuitem" class="categoryItem" tabindex="-1" href="#">{{yourCatergoryNameField}}</a></li>
  {{/each}}
  </ul>
</div>
</template>

Затем вы можете создать событие для записи текущей категории, выбранной в раскрывающемся списке при нажатии на нее.

    "click .categoryItem": function(e, t) {
        var text = $(e.target).text()
        Session.set("selectedCategory", text)
    },

Теперь вы можете фильтровать свои автомобили, используя реактивную переменную selectedCategory. Для этого вам понадобится еще один помощник. Это может быть, например:

Template.carList.helpers({
    carListingByCategory: function(){
       var filter = Session.get ("selectedCategory");
       return Car.find(category:filter)
    }
});

Это должно делать свое дело. Я никогда не использую сеанс, поэтому он может работать не так, как я полагаю. Если это не работает, используйте ReactiveDict. По сути, вы добавляете var pageSession = new ReactiveDict(); в начало документа и можете заменить Session на pageSession в моем коде.

ИЗМЕНИТЬ

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

Template.categoryFilter.helpers({
    companyCategories: _.uniq(Collection.find({}, {
        sort: {myField: 1}, fields: {myField: true}
    }).fetch().map(function(x) {
        return x.myField;
    }), true);
    }
});

где myfield — поле массива категорий.

ИЗМЕНИТЬ 2

Попробуйте изменить свой html и заменить {{justCategory}} на {{this}}:

<template name="categoryFilter">
 <div class="input-field">
  <select>
   <option value="" disabled selected>Choose your option</option>
    {{#each companyCategories}}
      {{> companyCategory}}
    {{/each}}
   </select>
 <label>Select Category</label>
 </div>
</template>

<template name="companyCategory">
 <option>{{this}}</option>
</template>
person Billybobbonnet    schedule 07.06.2015
comment
Все тот же результат, пожалуйста, посмотрите, я обновил свой код и добавил изображение, чтобы показать результат, который я получаю. он по-прежнему загружает результат, полученный из шаблона carItem. - person Neo; 07.06.2015
comment
попробуйте поместить console.table(Jobs.find().fetch()); в функцию рендеринга шаблона. Вы тоже видите там повторяющийся элемент? Вероятно, у вас проблемы с публикациями. К вашему сведению, если две публикации происходят из одной коллекции, они также оказываются на стороне клиента одной и той же коллекции. - person Billybobbonnet; 07.06.2015
comment
со сколькими 1) коллекциями 2) публикациями вы должны взаимодействовать на этой странице? - person Billybobbonnet; 07.06.2015
comment
всего один сборник и две публикации. у меня будет три таких фильтра для моего приложения, которые будут взаимодействовать с одной и той же коллекцией, и одна публикация, которая обслуживает все записи. - person Neo; 07.06.2015
comment
хорошо, тогда вы должны знать, что обе публикации окажутся в одной и той же коллекции на стороне клиента. Я не могу больше помочь, не имея представления о структуре вашей коллекции/публикаций и о том, какие поля вы ищете (и где). Вы уверены, что в вашей коллекции нет дубликатов на сервере? Вы можете использовать robomongo, чтобы проверить это. - person Billybobbonnet; 07.06.2015
comment
Публикация и схема это то, что у меня есть в качестве поля схемы. Я только что проверил, и в этом поле есть повторяющиеся элементы. Должен ли я указывать значения для фильтра в поле выбора вместо того, чтобы показывать их извлечение из коллекции? если да, как я могу добиться этого, например, сравнить список клиентов со значениями коллекции? Или есть ли способ заставить повторяющийся контент перестать отображаться и работать над ним? - person Neo; 07.06.2015
comment
Вы можете вставить в скрипку свои актуальные публикации на сервере? т.е. Meteor.publish('singleJob',... Насколько я могу судить (скрипка), у вас только одна подписка (вместе с ее публикацией) на вашей странице. - person Billybobbonnet; 07.06.2015
comment
Прошу прощения за этот полукод. теперь я загрузил все публикации и подписки. публикации - person Neo; 07.06.2015
comment
обновил его. не знаю, почему он работал и без него. как я могу получить различные значения для поля? потому что отдельный метод монго не работает. - person Neo; 07.06.2015
comment
твой способ с id тоже сработал. Я просто не знал об этом. У меня появилась идея, и я обновил ответ. - person Billybobbonnet; 07.06.2015
comment
Что-то, что я не уверен, понимаю: что вы хотите использовать для заполнения раскрывающегося списка: 1) все имена вакансий (или любое другое поле) документов вашей коллекции или 2) список каждой отдельной категории вакансий в вашей коллекции ( для каждого документа)? скажите мне, прежде чем пытаться исправить мое редактирование (это, вероятно, не сработает, учитывая все обстоятельства). Более того, если это проблема, связанная с автоформированием, я не смогу помочь (вы также должны добавить тег автоформы к вопросу) - person Billybobbonnet; 07.06.2015
comment
да список каждой отдельной категории работы в моей коллекции. и это тоже из публикации alljobs. эта публикация одиночного задания предназначена для отображения сведений о задании (так же, как и один пост в блоге) пользователю. Я хочу заполнить раскрывающийся список из публикации alljobs. - person Neo; 07.06.2015
comment
Template.categoryFilter.helpers({ companyCategories: function() { var everything = Jobs.find().fetch(); var ccategory = _.pluck(everything,"ccategory"); return _.uniq(ccategory); } }); Я использую это решение из того же источника. Оно отображает четыре ли, как в схеме, но не отображает значения. я вижу только html-файлы, но не отображаются на странице. что мне теперь делать? - person Neo; 07.06.2015
comment
console.log(_.uniq(ccategory)); в вашем помощнике. Проверьте, получили ли вы значения. - person Billybobbonnet; 07.06.2015
comment
var justCategory = _.uniq(ccategory) console.log(justCategory); return justCategory; сделал это, и в шаблоне я вызываю <option>{{justCategory}}</option>, но все же я вижу отдельные значения в консоли, но не в раскрывающемся списке. просто Ли. - person Neo; 07.06.2015
comment
Что нужно отправить на автоформу? Если это массив значений, это должно быть хорошо. Если это курсор, то это не так. Я предполагаю, что вы не генерируете свои объекты с помощью {{#each}} , автоформа делает это за вас? - person Billybobbonnet; 07.06.2015
comment
Отредактировал мой вопрос с помощью шаблона, который я использую - person Neo; 07.06.2015
comment
Это сработало. Большое спасибо за то, что были там, чтобы решить эту проблему. Большое спасибо - person Neo; 07.06.2015
comment
Пожалуйста, я рад, что смог помочь. Трудно было найти хорошее решение :-) - person Billybobbonnet; 07.06.2015
comment
да было довольно тяжело. не могли бы вы немного объяснить, почему переменная вспомогательной функции не возвращала значения и почему {{this}} возвращала их. Я новичок, я могу чему-то научиться у этого. - person Neo; 07.06.2015
comment
Конечно. Обычный вариант использования {{#each xxx}} использует курсор. Это как канал к базе данных. Но здесь было не так, ваш хелпер возвращает массив документов. {{this}} - это то, как вы получаете значение элемента массива. - person Billybobbonnet; 07.06.2015
comment
Итак, в основном fetch() возвращает массив, а find() возвращает курсор, верно? - person Neo; 07.06.2015
comment
не могли бы вы изучить этот вопрос о мой я сильно застрял в этом. @Биллибоббоннет - person Neo; 15.06.2015
comment
Я напишу ответ через пару часов, может раньше. - person Billybobbonnet; 15.06.2015
comment
Ок спасибо буду ждать. Вы правильно поняли ситуацию? - person Neo; 15.06.2015