I have some documents in my base:
//example docs
{"_id": "qwerty12345", "name": "Bob", "cards":["cardId1", "cardId2", "cardId3"]}
I'm using this for inserting data:
Template.insert.events({
'click add': function(){
if(confirm("Add card?"));
mycollection.update({_id: Session.get('fooId')}, { $addToSet: { cards: this._id}})
}
});
Then i'm using this helper for my template:
Template.index.helpers({
cards: function(){
query = mycollection.findOne({_id: Session.get('fooId')});
return query.cards;
}
});
And in template:
<img src="{{img}}" class="add">
{{#each cards}}
{{this}}<br>
{{/each}}
This works perfecty, but i have a trouble:
As you see, every image have id and url({{image}}), i'm need to add image url to 'mycollection' too for every card(on click).
How to make it?
And the second problem:
How to allow mongo insert duplicates to "cards" array?
Do you mean every card has id and image field? I guess so.
You can add nested object to an array fields. Like that
mycollection.update({_id: Session.get('fooId')}, { $addToSet: { cards: {id: this._id, image: this.image}}}).
In the template:
{{#each cards}}
{{this.id}}: {{this.image}}<br>
{{/each}}
For second problem: You can use $push instead of $addToSet
Related
I'm trying to implement sort and search to my items, so i started with sort and it works:
Template
<button class="sort">Sort</button>
{{#each cvs}}
{{> Interviu}}
{{/each}}
JS:
Template.Interviuri.onCreated(function () {
var self = this
self.autorun(function () {
self.sortOrder = new ReactiveVar(-1)
})
Template.Interviuri.helpers({
cvs() {
const instance = Template.instance()
return Cvs.find({}, { sort: { createdAt: instance.sortOrder.get() } })
},
})
Template.Interviuri.events({
'click .sort'(event, instance) {
instance.sortOrder.set(instance.sortOrder.get() * -1)
Next i wanted to implement Search on the same page. So the best way i could found was EasySearch.
But using EasySearch, it means i must change the way my items are being displayed. And then the sort doesn't work anymore.
Template
<div class="searchBox pull-right">
{{> EasySearch.Input index=cvsIndex attributes=searchAttributes }}
</div>
{{#EasySearch.Each index=cvsIndex }}
{{> Interviu}}
{{/EasySearch.Each}}
Collection
CvsIndex = new EasySearch.Index({
collection: Cvs,
fields: ['name'],
engine: new EasySearch.Minimongo()
})
JS
cvsIndex: () => CvsIndex,
How can i have both search and sort working at the same time?
With EasySearch you can use two methods on your index, namely getComponentDict() and getComponentMethods().
With getComponentDict() you can access search definition and options:
index.getComponentDict().get('searchDefinition');
index.getComponentDict().get('searchOptions');
You also have the corresponding setters to change the search definition/option.
getComponentMethods has mehods like
index.getComponentMethods().loadMore(integer);
index.getComponentMethods().hasMoreDocuments();
index.getComponentMethods().addProps(prop, value);
index.getComponentMethods().removeProps([prop])
From that you can set your prop, say index.getComponentMethods().addProp('sort', -1) and then on the index definition, in your MongoDB engine, set the sort from that prop:
index = new EasySearch.index({
// other parameters
engine: new EasySearch.MongoDB({
sort: function(searchObject, options) {
if(options.search.props.sort) {
return parseInt(options.search.props.sort);
}
return 1;
}
})
});
See EasySearch Engines for more info.
I have a list of student users and collection of classes. When I publish the list of students I want it to display the classes they are attending. My code currently displays all the classes that every student is attending under each student instead of the classes that are relevant to the individual student.
How can I get it to display the right classes under the right stendents.
Path: classes.js
Template.classes.helpers({
studentList: ()=> {
return Meteor.users.find({_id: { $ne: Meteor.userId() }});
},
classes: ()=> {
return Classes.find({_id: { $ne: Meteor.userId() }});
},
});
Path: classes.html
{{#each studentList}}
{{profile.firstName}}
{{#each classes}}
{{class}}
{{/each}}
{{/each}}
Path: Classes.js
Schemas.Classes = new SimpleSchema({
class: {
type: String
},
teacherUserId: {
type: String,
autoValue: function() {
return this.userId
},
autoform: {
type: "hidden"
}
},
studentUserId: {
type: String,
optional: true,
autoform: {
type: "hidden"
}
}
});
The code above means: "Find all classes where the id of the class isn't equal to the current user's id." I think you want: "Find all classes where the current user's id is in the list of students."
Assuming classes have a students field, which is an array of user ids, you'd do this:
return Classes.find({students: Meteor.userId()});
Thanks to everyone's input my problem is solved! Tim hit the nail on the head. For those of you encountering a similar problem, check out the code below. I hope it helps. Thanks again Tim.
Path: classes.js
Template.classes.helpers({
classes: ()=> {
return JobOffers.findOne({candidateUserId: this._id});
},
});
Path: classes.html
{{#each studentList}}
{{profile.firstName}}
{{#with classes}}
{{class}}
{{/with}}
{{/each}}
When you are defining classes: () => Classes.find({_id: { $ne: Meteor.userId() }}) what you are telling the computer is:
Every time I ask you for the box labeled 'classes' I want you to go
through the box we called 'Classes' and fill 'classes' with everything
you find that doesn't have the '_id' property set to whatever you find
when you look inside of the box that 'Meteor.userId()' gives you.
That is not what you are wanting to ask your worker for. You want to ask your worker:
Every time I ask you for the box labeled 'classes' I want you to go
through the box we called 'Classes' and fill 'classes' with everything
that you find where the '_id' is set to a certain string that I am passing
you.
Which, without really trying to write it for you, it might have something to do with this being used somewhere in your helper function
I am new to meteor, and have a basic understanding of what is going on, but I am stuck with this example (the problem has been simplified as much as possible):
I have a template, and a child template:
<template name="test">
{{#each items}}
{{> testItem}}
{{/each}}
{{#each items}}
{{> testItem}}
{{/each}}
</template>
<template name="testItem">
<div {{ b "click: toggle"}}>{{value}}</div>
</template>
Template.test.viewmodel({
items: [],
onCreated: function() {
this.items().push({ value: 'test' });
}
})
Template.testItem.viewmodel({
toggle: function() {
this.value("changed");
}
});
The thing here is we have a single array of items in the viewmodel, and we render it through a child template multiple times.
When we toggle the item, it only toggles the single item template, not the other representation of it. It is behaving like it is copying the value, or some sort of scoping is taking place.
My expectation would be the second item to also change, but this is not the case - what am I missing, or misunderstanding here?
EDIT - Additional Investigation
If I change the item through the parent, and notify it has changed, the changes propogate throughout the child templates
Template.testItem.viewmodel({
toggle: function () {
this.parent().items()[0].value = "changed";
this.parent().items().changed();
}
});
Thanks!
You're right, when you do this.value("changed"); you're changing the value of the testItem view model, not the parent array. If you're going to modify the properties of objects in an array I highly recommend you use a client side Mongo collection instead. It will save you a lot of headaches.
Items = new Mongo.Collection(null);
Template.test.viewmodel({
items: function() {
return Items.find();
},
onCreated: function() {
Items.insert({ _id: "1", value: 'test' });
}
})
Template.testItem.viewmodel({
toggle: function() {
Items.update({ _id: this._id() }, { value: 'changed' });
}
});
btw, I rarely check SO. You will get quicker responses on viewmodelboard.meteor.com
So, I'm working on a Meteor project and I can't get this route to generate properly, or at all for that matter.
<template name="browseAll">
<h3>List of classes with books available!</h3>
<ul>
{{#each aggCount}}
<li>{{ _id }} ({{ count }})</li>
{{/each}}
</ul>
</template>
The data that is being iterated over is a result of aggregation using MongoInternals, and that is as follows:
(server/methods.js excerpt):
classCount: function() {
// Attempt aggregation of the books table to count by class, maybe.
var db = MongoInternals.defaultRemoteCollectionDriver().mongo.db;
var col = db.collection("books");
var aggregateSync = Meteor._wrapAsync(col.aggregate.bind(col));
var pipeline = [
{$group: {_id: "$class", count: {$sum: 1}}},
{$sort: {_id: 1}}
];
var theAnswer = aggregateSync(pipeline);
return theAnswer;
}
It seems that the data is coming through okay, and sample data from aggregation (coming into the template) looks like this:
[ { _id: 'ADNR1234', count: 2 }, { _id: 'ARTH1234', count: 1 } ]
That's the template code I've got, and this is the route that it's supposed to be working with:
this.route('browse-class', {
path: '/browse/:_class',
data: function() {
var booksCursor = Books.find({"class": this.params._class},{sort:{"createdAt": 1}});
return {
theClass: this.params._class,
numBooks: booksCursor.count(),
books: booksCursor
};
}
});
I don't understand it. The data is being SHOWN, and what I want to do is generate a URL for browse-class (route) that takes the value of {{ _id }} in the helper as a parameter, so as to generate something like this:
application.org/browse/CLSS
Be aware that {{pathFor}} must be called with a data context properly set :
{{#with class}}
{{pathFor "browse-class"}}
{{/with}}
Optionnaly it is possible to pass the data context as a parameter :
{{pathFor "browse-class" class}}
The data context provided to pathFor is used when generating the route path, if you defined a route path like this :
path: "/browse/:_id"
Then it will use the _id from the class to properly generate a URL.
For the text of the link, I doubt you want to display the _id, your class documents probably include a "label" so you could use this :
{{ label }}
I want to render a reactive template based on this document:
Sprint:
WorkStories:
Tasks
I know this can be done by making a Meteor collection for each "level," but that means the result is actually being stored as a seperate document in the database. I want to know if its possible to have one collection/document for Sprint, that has standard collection of WorkStories with a standard collection of Tasks each, rendered to a reactive template.
I've seen [Meteor.deps.Context][1], but I can't figure out how to wire it up (or even if it's the right tool), and none of the examples do anything like this.
I've also seen [this question][2], but he seems to be asking about connecting related-but-separate documents, not rendering a single document.
Because database queries on collections are already reactive variables on the client, the below will render one Sprint document with nested WorkStories that has nested Tasks in a template:
HTML:
<head>
<title>Sprints Example</title>
</head>
<body>
{{> sprints }}
</body>
<template name="sprints">
{{#each items}}
<div>Name: {{name}}</div>
{{#each this.WorkStories}}
<div>{{name}}</div>
{{#each this.Tasks}}
<div>{{name}}</div>
{{/each}}
{{/each}}
{{/each}}
</template>
Javascript:
Sprints = new Meteor.Collection("sprints");
if (Meteor.isClient) {
Template.sprints.items = function () {
return Sprints.find({});
};
}
if (Meteor.isServer) {
Meteor.startup(function () {
if (Sprints.find().count() === 0) {
Sprints.insert({ name: 'sprint1', WorkStories: [{ name: 'workStory1', Tasks: [{ name: 'task1' }, { name: 'task2' }, { name: 'task3' }] }, { name: 'workStory2', Tasks: [{ name: 'task1' }, { name: 'task2' }, { name: 'task3' }] }] });
}
});
}
UPDATE WITH ANSWER
Per #Paul-Young's comment below, the problem with my usage of $set was the lack of quotes in the update. Once the nested object renders in the Template, as of Meteor 0.5.3 you can update sub arrays simply:
Sprints.update(Sprints.findOne()._id, { $set: { "WorkStories.0.name": "updated_name1" } });
BACKGROUND INFO
This does load the initial object, but updating seems problematic. I was able to get the Template to rerender by calling the below in the console:
Sprints.update(Sprints.findOne()._id, { name: 'sprint777', WorkStories: [{ name: 'workStory1232', Tasks: [{ name: 'task221' }, { name: 'task2' }, { name: 'task3' }] }, { name: 'workStory2', Tasks: [{ name: 'task1' }, { name: 'task2' }, { name: 'task3' }] }] })
Which follows these rules, per the Meteor Docs:
But if a modifier doesn't contain any $-operators, then it is instead interpreted as a literal document, and completely replaces whatever was previously in the database. (Literal document modifiers are not currently supported by validated updates.
Of course, what you want is to use the $set style operators on nested documents and get the templates to re-render when their nested properties change without having to replace the entire document in the table. The 0.5.3 version of Meteor included the ability to search for sub-arrays:
Allow querying specific array elements (foo.1.bar).
I've tried to do the . sub array search and haven't been able to update the WorkStories subdocument of the original entity yet, so I posted a question in the google talk.
Hope this helps