How do I mark data context as changed? - meteor

Question

I have a page that handles some query data from the url, as in localhost/home?foo=bar.
It then sends a JSON to some server somewhere. That much works.
With iron-router, I handle a form submission like so: Router.go('home', {}, {query: queryObjectVar}), which also works.
So when you submit the form with foo="somethingelse" you end up in localhost/home?foo=somethingelse, the page mostly doesn't reload because of meteor magic thus looking really fast, and the JSON is sent with foo=somethingelse, and all is well.
However if you're in localhost/home?foo=var and then you go to the same exact route with Router.go(...), query included, the url doesn't change, and the page does not send the JSON thing. Which in most cases is fine, since technically nothing changed so nothing should need to be done. However, I want it to behave as if the url changed.
How do I do that?
Currently I have the template hooked up to the query like so:
Router.route('home', {
data: function() { return this.params.query }
})

Answer 1

I'm not sure if this is what you want, but you could change the route by making an extra navigation.
Often, after submitting the form, you want the user to know that the form was received or processed somehow.
I would suggest to make an extra route that only handles the processing, something like /home/process. Have the event handler on form submit navigate to the process route. The action for the route sends the json file based on this.params.query.
After the json was sent (I used console.log but better approach would be Meteor.call('here_I_will_sent_json', this.param.query), render a template that let's the user know that the data was sent. And now the trick: have a link or button in the template that navigates to /home or whatever you want the user to direct to.
Templates.
<template name="main">
<div>Sample application</div>
{{> yield}}
</template>
<template name="mainPage">
<div>Main page</div>
Home
</template>
<template name="home">
<div>Home page</div>
{{> form}}
</template>
<template name="form">
<form id="myForm" method="get">
<input type="text" name="foo">
<input type="submit" value="Save">
</form>
</template>
<template name="finishedSending">
<div>finishedSending!</div>
go to main page
</template>
Javascript:
Router.configure({
layoutTemplate: 'main'
});
Router.route('mainPage', {path: '/'});
Router.route('home', {path: '/home'});
// Extra route just for processing the submitted form
Router.route('process', {
path: '/home/process',
data: function() {
return this.params.query
},
action: function() {
// Here you send the json or do whatever you need to process.
// Best to have some Meteor method do the actual processing.
// You could use a callback if processing takes some time.
console.log('Send the json content based on: ', this.params.query);
this.render('finishedSending');
}
});
if (Meteor.isClient) {
Template.main.events({
'submit #myForm': function (e) {
e.preventDefault();
var fieldValue = event.target.foo.value;
Router.go('process', {} , {query: {foo: fieldValue}})
}
});
}