Question

我有一个页面处理来自网址的一些查询数据，如localhost/home?foo=bar中所示。然后它将JSON发送到某个服务器。那很有用。使用iron-router，我处理一个表单提交，如：Router.go('home', {}, {query: queryObjectVar})，它也有效。

因此，当您使用foo="somethingelse"提交表单时，您最终会进入localhost/home?foo=somethingelse，因为流星魔法因此看起来非常快，所以页面大部分都不会重新加载，并且JSON会随foo一起发送= somethingelse，一切都很好。

但是，如果您在localhost/home?foo=var中，然后使用Router.go(...)转到相同的确切路线，则包含查询，则网址不会更改，并且页面不会发送JSON的事情。在大多数情况下这是好的，因为从技术上讲没有任何改变，所以不需要做任何事情。但是，我希望它的行为就像网址更改一样。

我该怎么做？

目前，我将模板连接到查询，如下所示：

Router.route('home', {
  data: function() { return this.params.query }
})

Answer 1

我不确定这是否是您想要的，但您可以通过进行额外的导航来更改路线。通常，在提交表单后，您希望用户知道表单是以某种方式接收或处理的。我建议做一个只处理处理的额外路由，比如/ home / process。让表单上的事件处理程序导航到进程路由。路由的操作基于this.params.query发送json文件。发送json之后（我使用了console.log，但更好的方法是Meteor.call（＆＃39; here_I_will_sent_json＆＃39;，this.param.query），渲染一个模板，让用户知道数据已经发送了。现在的诀窍是：在模板中有一个链接或按钮导航到/ home或者你希望用户指向的任何内容。

模板。

<template name="main">
    <div>Sample application</div>
    {{> yield}}
</template>

<template name="mainPage">
    <div>Main page</div>
    <a href="{{ pathFor 'home'}}">Home</a>
</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>
    <a href="{{ pathFor route='home'}}">go to main page</a>
</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}})
        }
    });
}

如何将数据上下文标记为已更改？

1 个答案: