客户端上的多个启动答案

【问题标题】：Multiple startups on client客户端上的多个启动
【发布时间】：2013-08-14 18:52:24
【问题描述】：

我们看到了非常奇怪的 Meteor 行为。在执行一个简单的事件挂钩（从表单收集信息、执行插入并更新 Session 变量）之后，客户端似乎再次启动，重新绘制整个页面。实际上，Meteor.startup 被执行了不止一次，即使浏览器窗口没有被刷新（或类似的东西）。更奇怪的是，我们制作了极其相似的应用程序，但它们根本没有表现出这种行为。我们无法检测到不同项目之间的任何显着差异。

我们使用的是 Meteor 版本 0.6.4.1（在所有情况下），自动发布和不安全都已被删除。

播放列表.html：

<body>
{{> addSong}}
{{> playlist}}
</body>

<template name="addSong">
<form>
    <fieldset>
        <legend>Add a song to the playlist!</legend>
        <div><input type="text" id="artist" /></div>
        <div><input type="text" id="title" /></div>
        <div><button type="submit" id="insertButton">Insert</button></div>
    </fieldset>
</form>
</template>

<template name="playlist">
<div>Votes left: {{votes}}</div>
<ul>
    {{#each songs}}
        <li>
    {{artist}} - {{title}} - {{score}}
    <button class="voteUp" mongo_id="{{_id}}">Vote up!</button>
    <button class="remove" mongo_id="{{_id}}">X</button>
</li>
    {{/each}}
</ul>
</template>

lib/common.coffee

@Songs = new Meteor.Collection "songs"

Songs.allow
    insert: (userID) ->
            true
    update: (userID) ->
            true
    remove: (userID) ->
            true

client/client.coffee

Meteor.subscribe "songs"

Template.playlist.songs = ->
  Songs.find {},{sort:{"score":-1}}

Template.playlist.votes = -> Session.get("votes")

Template.addSong.events
  'click #insertButton': (event,template) ->
    artist = template.find("#artist").value
    title = template.find("#title").value
    Songs.insert({"artist":artist,"title":title,"score":1})
    votes = Session.get("votes")
    Session.set "votes", votes+3
    return

Template.playlist.events
    'click .voteUp': (event,template) ->
        id = event.target.attributes.mongo_id.value
        Songs.update({_id:id},{$inc:{"score":1}})
    'click .remove': (event,template) ->
        id = event.target.attributes.mongo_id.value
        Songs.remove({_id:id})

Meteor.startup ->
    alert "Starting"
    Session.setDefault "votes", 0

服务器/server.coffee

Meteor.publish "songs", -> Songs.find({})

要复制奇怪的行为，只需在表单上提交项目，这每次都会触发启动（在 Chrome 和 Safari 中验证）。

【问题讨论】：

标签： meteor

【解决方案1】：

如果你有github上的代码，我可以帮忙看一下，但是单凭你的描述，很难说会是什么问题……

【讨论】：

【解决方案2】：

好的。我们发现了问题所在。 <form> 标记结合提交按钮导致客户端执行 HTTP POST，从而导致整个页面重新呈现。这是一个非常微妙的问题，很难检测到，但这里的教训是，除非您绝对确定，否则不应使用<form> 标签。某种机制/警告/文档可能是防止这种情况发生在其他人身上的好主意。

【讨论】：

你可以使用任何你想要的东西，只要做一个event.preventDefault()。