perak / kitchen-examples

Meteor Kitchen examples
164 stars 115 forks source link

Loop a collection #34

Open dearamy opened 8 years ago

dearamy commented 8 years ago

Is there any way that I can loop a collection to build some UI text like tabs?

perak commented 8 years ago

@dearamy I am not sure do I understand your question. Maybe you want this:

create two files inside directorywhere is your .json input fie for the kitchen. Both files with the same name but different extension:

tabs.html tabs.js

inside tabs.html put:

<template name="TEMPLATE_NAME">
  {{#each QUERY_VARIABLE}}
      ...html content for each item here...
  {{/each}}
</template>

Now, in your .json input file, in some page, add component:

... inside page...
"components": [
  {
    "name": "my_tabs",
    "type": "custom_component",
    "template": "tabs", 
    "query_name": "name_of_your_query_here"
  }
]
dearamy commented 8 years ago

Exactly what I want! thank you~~~~~

perak commented 8 years ago

(assiming you are using blaze, not react)

And you can add code to tabs.js if you need it:

Template.TEMPLATE_NAME.events({
});

...etc...
dearamy commented 8 years ago

@perak and can I still use the "items" to build the route?

perak commented 8 years ago

Did you mean to build link to route (you are creating menu?). Yes you can, inside "each" block {{pathFor "route_name" some_argument=field_name_from_query}}

perak commented 8 years ago

(and your routeshould be defined to use argument)

perak commented 8 years ago

See route_params