3

流星の依存関係と反応変数に頭を悩ませようとしています。2つの選択ボックスがあります。1つはカテゴリ（果物、野菜、鶏肉など）を一覧表示し、もう1つはサブカテゴリ（リンゴ、梨、ブドウなど）を一覧表示します。

ユーザーがカテゴリドロップダウンを変更して、サブカテゴリドロップダウンを表示および入力するようにしたいと思います。

Template.action_form.events = {'change #category'} ...を監視できることはわかっていますが、ここから実行する手順がわかりません。1つの考え（ハック）は、すべてのサブカテゴリを多次元配列に出力し、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

これに流星の反応性魔法全体を使用したい場合は、最初の選択が変更された場合にセッション変数を設定できます。

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

のサブスクリプションはSubcategories、選択したカテゴリをパラメーターとしてサーバーの publish メソッドに渡します。

// 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();
};

もちろん、すべてのサブカテゴリを一度に公開し (サブカテゴリがいくつあるかはわかりません)、subscribe/publish メソッドではなく、クライアントでサブカテゴリをフィルタリングすることもできます。 

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