我在我的Meteor应用程序中有以下模板:
<template name="items">
<div class="mainframe">
<h3>Available items:</h3>
<div class="items-table-container">
<table class="table table-hover">
<tbody>
{{#each all_items}}
{{> item}}
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="btn-group">
<button id="create" class="btn">Create new item</button>
</div>
</template>
模板函数是一种简单的功能:
Template.items.all_items = function () {
return Items.find({}, {sort: {name: 1}}).fetch();
}
还有一个事件绑定在#create
按钮上,它将一个新项目插入到Items集合中,这个功能很好用。
现在最重要的部分是CSS:
.items-table-container {
height:340px;
overflow-y: scroll;
}
所以基本上,我希望我的表格在固定大小的区域内拥有可滚动的内容。 问题开始于当我在一个浏览器中滚动项目表格的内容,然后在另一个浏览器中添加了一个新项目时。第一个浏览器会更新项目列表并将内容滚动回到顶部位置。
问题是如何防止单个模板的自动更新? 在这种特殊情况下,我认为我实际上需要类似传统网页更新的东西: 如果用户没有立即看到新添加的项目,而是在重新加载页面后才能看到,那也没关系。
另一个想法是进行某种分页,而不是滚动内容。我认为这将解决问题,但这将更加复杂,我希望避免这种情况。
我认为理想情况下,我希望能够告诉Meteor,我希望Meteor不是在模型更改时更新模板,而是通过请求来更新模板。