Search code examples
javascriptmeteoriron-router

Iron Router Get Current Item?


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.


Solution

  • 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:

    1. 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).

    1. I never found any other documentation for Iron Router apart the Guide you mentioned.