Right now I have two routes in my application. There's the main page route that has a list of Ideas (just text items) and then there's a route for showing and editing Ideas.
My problem is with editing ideas... I'm not sure how to actually get the item being edited and persist the changes. I could use a global variable, but that's almost certainly a hack and not the "meteor way" (or the right way in any software, for that matter.) I could use the Session
, but that doesn't seem quite right to me either... I got the impression that Session
was just for visual things (like hiding stuff temporarily.)
So here's the relevant code I have so far:
Router.route('/idea/:_id', function() {
var idea = Ideas.findOne({_id: this.params._id});
// Should I save this.params._id in a Session?
// Is that "the meteor way"?
this.render('ShowIdea', {data: idea});
}, {
name: 'idea.show'
});
Template.ShowIdea.events({
"input div": function (event) {
var newText = $(event.target).text();
console.log("newText: " + newText);
// this event gets called at the right time, and I can see the new text,
// but how do I know which item to save it on?
}
});
Not much to see for the template, but here it is:
<template name="ShowIdea">
<div contentEditable="true">{{text}}</div>
</template>
Also, two side questions:
1 - Is $(event.target).text()
the best way of extracting the new text? I couldn't think of anything else, but it seems a bit long winded to me.
2 - Is there some comprehensive documentation to Iron-Router somewhere? I see a QuickStart and a Guide, but there doesn't seem to be a straight up list of Objects and Methods anywhere for it.
I think that your approach is good. To save the new text just do something like:
Ideas.update(this._id, {$set: {text: newText}});
You can use this._id
because you already set your data context in the router with data: idea
, so in your Template.ShowIdea.helpers/events
"this" refers to the specific idea.
Concerning your side questions:
You could also use template.find() like this :
"input div": function (event, template) {
var newText = template.find("div").text();
}
But it is less straightforward and I think that event.target
is better as the DOM element is already populated (also note the difference between event.target
and event.currentTarget
but there is no issue in your example).