First of all Hello to all,
I am new to Meteor and just a hobby developper. Something I am sure pretty simple has been bugging me for the last days and I will try to explain my issue through a simple example.
Lets consider an online forum where I have Categories of Forums and in each of them one of more forums.
I would like the final result in my template to be something like:
{{#each category}}
{{#each forum where forum.category=category}}
{{nameForum}}
{{/each}}
{{each}}
and that would list the category and for each of them the different forum inside of it.
My questions are:
would be what's the best approach for such a problem ? meaning:
Shall forums be a sub-elements of the categories in the Schema but then the shcema seems a bit complicated.
Shall forum and categories be separated schema but in the same collection but then how can I do this "where" in the template ?
Do I have a totally silly approach on the issue and I missed something in the tutorial ?
Thank you in advance for your reply.
Ivo
Do something like this
myTemplate.html
{{#each getCategories}}
{{#each getForum categoryName}} // Assuming that in your category db you have categoryName field
{{nameForum}}
{{/each}}
{{each}}
myTemplate.js
Template.myTemplate.helpers({
getCategories: function() {
return Category.find({});
},
getForum: function(category) {
return Forum.find({"category": category});
}
})
Basically you move the logic of retrieving the forum inside your template helper
Related
I am trying to implement a simple search feature, which will filter the results and update the listing.
I tried almost every single tutorial out there, every tutorial seems to be working with its jsfiddle but when I apply the same thing on my project, it does not work at all.
Here is what I am having as a first problem, my search field does not seems to be bound with computed property in controller.
I also tried it as a component but again same issue, if I type anything in search field it does not reflect anything.
Let me share my code here,
input type="text" value=searchText placeholder="Search..."
searchResults: ( ->
console.log "On every key press it should come here.."
model = #get('model')
searchText = #get('searchText')
filterByPath = #get('filterByPath')
visualPath = #get('visualPath')
if searchText
searchText = searchText.toLowerCase()
model = model.filter(item) ->
Ember.get(item, filterByPath).toLowerCase().indexOf(searchText)>= 0
model.getEach(visualPath)
).property('searchText')
Tried almost the same thing with component, but no luck so far. I am not using handlebars but Emblemjs.
You actually need to use computed property in template if you want it to be compiled, then recompiled etc. It is somewhat lazily evaluated so you can't debug that without using this in template first or calling from JavaScript code. So basically you need to use searchResults in your template first.
In demo there was model instead of searchResults. I guess in your application you have similiar setup and same bug.
Fix:
{{#each searchResults as |item|}}
<li>{{item}}</li>
{{/each}}
Working demo.
Been scratching my head on this, so here's the simplest way to view it - I'm using this:
Template.today.rendered = function() {
console.log(this.firstNode.children.length);
};
Simply to try and get the count of items that are supposedly rendered. The template looks like:
<template name="today">
<div class="todaySlider">
{{#each dayOfWeek}}
{{> singleDay}}
{{/each}}
</div>
</template>
and if it's of any importance, singleDay looks like:
<template name="singleDay">
<div class="day {{isCurrent}}">
<h2 class="date">{{date}}</h2>
{{#each items}}
{{> item }}
{{/each}}
</div>
</template>
I'm trying to wait for all the "singleDays" to render, however that count I'm logging is usually different on refresh. I'll get anything from 0 to the correct value, and I don't understand why. This seems to be the right place to call it, I fear that maybe the double "each" is too slow?
I've tried timers (which I honestly shouldn't) and even DOM Mutation Observers (which seem like overkill) but surely there is a pure Meteor approach to this, any ideas?
Template.rendered happens when the template is rendered, but that doesn't mean there'll be any data in it.
I'm pretty sure you'll need to do this inside a helper.
each helpers don't have to return cursors, they can also return an array. If the number of "singleDays" is short, you could send an array to the template instead of a cursor. It's kind of ugly, and there might be a better way to do this, but I think this will work.
Template.today.helpers({
dayOfWeek: function() {
var days = DaysCollection.find({}).fetch();
if (days[days.length - 1]) days[days.length - 1].isLast = true;
return days;
}
});
I assume {{isCurrent}} is where you add the extra class that you're talking about. If so, just have the isCurrent helper look for this.isLast to be true.
Seems like what is happening here is that the template is being rendered before the Mongo collection is sent to the client. To be more specific, meteor renders your template as fast as possible, which means that it has no concept of 'waiting' for any data to be sent from the server to the client. Therefore, if you place anything indirectly regarding database queries inside of a non-reactive call (Template.rendered), then it will execute with the data as undefined.
I'm assuming your dayOfWeek helper looks something like this:
Template.today.helpers({
daysOfWeek: function () {
var today = CollectionName.findOne();
return today.daysOfWeek;
}
})
(Or maybe you are using the router to pass the day directly to the template)
Either way, within your router you need to wait for the Mongo collection item to be sent to the client before any rendering takes place. If you are using Iron-Router, you simply have to 'wait' for your data/subscription.
More information can be found here: https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#wait-and-ready
If you are still using autopublish, then you can replace the subscription with your database query.
The reason I want to do this is that I have a list of objects that should be displayed twice, once in expanded form and once in compact form. So I would like to do this:
{{render 'widgets' store.widgets}}
...
{{render 'widgets-compact' store.widgets}}
and in both cases use the WidgetsController.
Ah I realized after looking at the code that although it is not mentioned anywhere in the documentation, you can just do controller=
{{render 'widgets-compact' store.widgets controller=widgets}}
Using meteor.js and i am kind of stuck with the structure of template or how to do this trick as clear as possible.
Example of my chating app problem:
chatingWith = DB query for selecting each user i am chating with like on FB // REACTIVE
{{#each chatingWith}}
{{#each this.messages}}
Message1...
Message2...
{{/each}}
<form>
<input class="sendMessage" type="text" />
</form>
{{/each}}
This works exactly as i need but with one big problem... when new message arrive... the content is re-rendered ofc and when i am in this time writing a message the value of will dissapear.
How would you solve this?
Sorry for english and thx for tips!
There is a section in the documents about preserving inputs. http://docs.meteor.com/#template_preserve
From my understanding, as long as you have the package preserve-inputs installed, it should keep the reactive nature of meteor from erasing the input. I would check to see if the preserve-inputs package is installed.
I am trying to use ember-data using https://github.com/emberjs/data as a reference.
Specifically, I am trying to use an array controller to display all of the 'Person' objects in my database. I also want to allow the user to create a new 'Person'.
I have the following code which works:
App.peopleController = Em.ArrayController.create
content: App.store.findAll(App.Person)
newPerson: (name) ->
App.store.create App.Person,
name: name
#set('content', App.store.findAll(App.Annotation))
However, it seems inefficient to reset the content property every time a new person is created. If I remove the last line and change the code to the following:
App.peopleController = Em.ArrayController.create
content: App.store.findAll(App.Person)
newPerson: (name) ->
App.store.create App.Person,
name: name
A new view is still created on ever newPerson call, but the same object is duplicated. Essentially what is happening is all of the new templates use the first object created instead of a new one each time. I think this is related to the following bug: https://github.com/emberjs/data/issues/11.
For reference, my template logic is as follows:
{{#each App.peopleController}}
{{#view App.PersonView contentBinding="this"}}
{{#with content}}
Client id is {{clientId}}
{{/with}}
{{/view}}
{{/each}}
When I use the second version of my code-- the one with the #set('content', App.store.findAll(App.Annotation)) line-- the clientId is duplicated for every Person object. In the first version, the client ids are correct.
Can anyone shed some light here? Am I doing this correctly? My instincts are telling me this is a bug but I am not sure.
I think it is a bug. I posted a related issue that illustrates this issue.
Try using the #collection view instead.
See code of ToDo example. Also see http://guides.sproutcore20.com/using_handlebars.html section 5 for some documentation.
Hope this helps.