3

我试图围绕流星依赖项和反应变量。我有两个选择框。一个列出一个类别（水果、蔬菜、家禽等），第二个将列出子类别（苹果、梨、葡萄等）。

我希望用户更改类别下拉列表以显示和填充子类别下拉列表。

我知道我可以观看 Template.action_form.events ={'change #category'}... 但我不确定从这里采取什么步骤。一种想法（hack）是将所有子类别输出到多维数组并使用 jquery 来管理它。我不得不认为有一种更聪明的方法可以用流星做到这一点。

对于类别下拉列表，我有这样的内容：

Template.action_form.category = function(id){
    return Category.find();
}

我不确定如何为子类别设置模板......现在我有这个（不工作）

Template.action_form.subcategory = function(parent){
  if (document.getElementById(parent)){
      category = document.getElementById(parent).value;
      return Subcategories.find({category_id:parent}); 
  }
}

HTML/模板如下所示：

<template name="action_form">
    <select id="category" class="action-selects">
        {{#each category _id}}
        <option value="{{_id}}">{{name}}</option>
        {{/each}}
    </select>
    <select id="subcategory" class="action-selects">
        {{#each subcategory "category"}}
        <option value="{{_id}}">{{name}}</option>
        {{/each}}
    </select>
<template>

感谢大家提供的任何指示。

4

1 回答 1

2

如果你想为此使用流星的整个反应魔法，你可以在第一个选择发生变化时设置一个 Session 变量。

Template.action_form.events = {
  'change #category': function(evt) {
     Session.set("selected_category", evt.currentTarget.value);
  }
}

您的订阅Subcategories将所选类别作为参数传递给服务器发布方法。

// Client
Meteor.autosubscribe(function () {
  Meteor.subscribe("subcategories",Session.get("selected_category"));
}

// Server
Meteor.publish("subcategories", function(selectedCategory) {
  Subcategories.find({category_id: selectedCategory})  
});

Subcategories如果找到，子类别的模板将显示所有。

Template.action_form.subcategory = function(parent){
  Subcategories.find();
};

当然，您可以一次发布所有子类别（不知道您将拥有多少子类别）并在客户端中过滤子类别，而不是在订阅/发布方法中。 

Template.action_form.subcategory = function(parent){
  Subcategories.find({category_id: Session.get("selected_category")});
};
于 2012-11-10T19:35:10.580 回答