如何在Meteor更新集合时防止内容滚动
我的问题非常类似,但并不完全相同 我的Meteor应用程序中有以下模板:如何在Meteor更新集合时防止内容滚动,meteor,Meteor,我的问题非常类似,但并不完全相同 我的Meteor应用程序中有以下模板: <template name="items"> <div class="mainframe"> <h3>Available items:</h3> <div class="items-table-container"> <table class="table table-hover">
<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>
还有一个绑定到#create
按钮的事件,该按钮将一个新项目插入到项目集合中,并且工作正常
现在最重要的部分是CSS:
.items-table-container {
height:340px;
overflow-y: scroll;
}
所以基本上我希望我的表在一个固定大小的区域内有可滚动的内容。
当我在一个浏览器中向下滚动items表的内容,然后在另一个浏览器中添加新项目时,问题就开始了。第一个浏览器更新项目列表并将内容滚动回顶部位置
问题是如何防止单个模板的自动更新?我认为在这种特殊情况下,我实际上需要一些类似于传统web页面更新的东西:如果用户没有立即看到新添加的项目,而是在重新加载页面之后,这就没关系了
另一个想法是进行某种分页,而不是滚动内容。我认为这将解决问题,但这将是更复杂的,我想避免这一点
我认为理想情况下,我希望能够告诉Meteor,我希望Meteor不是在模型更改时更新模板,而是通过请求来更新模板。将项目列表放在可滚动div容器内的另一个模板中:
<template name="items">
<div class="mainframe">
<h3>Available items:</h3>
<div class="items-table-container">
<table class="table table-hover">
<tbody>
{{> myitems}}
</tbody>
</table>
</div>
</div>
<div class="btn-group">
<button id="create" class="btn">Create new item</button>
</div>
</template>
<template name="myitems">
{{#each all_items}}
{{> item}}
{{/each}}
</template>
这样,您可以保持反应性,而无需提出更新请求。只重新渲染可滚动框内的部分,保持可滚动容器滚动到的位置
编辑:为了保存/冻结您的内容,您可以使用该功能,它将css选择器作为输入。e、 g
Template.items.preserve(['.items-table-container']);
要使整个区域保持常量,以便它不会重新渲染,可以使用块辅助程序{{{#constant}}
如果要保留特定的DOM元素,可以使用Template.myTemplate.preserve(),它将要保留的节点的选择器作为参数。隔离数组迭代
{{#isolate}}
{{#each all_items}}
{{> item}}
{{/each}}
{{/isolate}}
您还可以让jquery句柄固定滚动位置。我的用例是在主体文档的当前滚动点上方插入一些东西,并将文本向下滚动 还不确定如何让meteor在每次更新发布集时运行回调,但您应该了解:
before = document.body.scrollHeight
// insert your elements
after = document.body.scrollHeight
if $(document).scrollTop() != 0
# scroll us equal to the amount of scroll height added
window.scrollTo(0, $(document).scrollTop()+(after-before) )
这就解决了问题,谢谢!但是,我认为应该有可能“冻结”渲染的模板,因为有时反应行为是不需要的。我不知道保留,但在使用保留重新渲染期间,滚动位置不会保持不变。但它有助于在其他场景中冻结#隔离、#常数和保留都已删除:+1这实现了将内容放在另一个模板中的相同效果,但如果您的代码以这种方式更有意义,则将其保留在相同的模板上下文中。#隔离、#常数和保留都已删除:#隔离、#常数,并已全部删除:
{{#isolate}}
{{#each all_items}}
{{> item}}
{{/each}}
{{/isolate}}
before = document.body.scrollHeight
// insert your elements
after = document.body.scrollHeight
if $(document).scrollTop() != 0
# scroll us equal to the amount of scroll height added
window.scrollTo(0, $(document).scrollTop()+(after-before) )