Clever Geek Handbook

How to prevent content scrolling when Meteor updates collection

My question is very similar to this and this one , but not exactly the same.

I have the following template in Meteor app:

<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>

The template function is trivial:

Template.items.all_items = function () {
    return Items.find({}, {sort: {name: 1}}).fetch();
}

There is also an event associated with a button #create

that inserts a new item into the Items collection and works great.

Now the most important part is the CSS:

.items-table-container {
    height:340px;
    overflow-y: scroll;
}

So basically I want my table to have scrollable content inside a fixed size region. The problem starts when I view the content of the table of elements in one browser and then add a new element in another browser. The first browser updates the list of items and moves the content to the top.

The question is how to prevent automatic updates for one template? I think that in this particular case, I really need something like a traditional web page refresh: Ok, if the user does not see the newly added element immediately, but after reloading the page.

Another idea is to do some sort of pagination instead of scrollable content. I think this would solve the problem, but it would be much more complicated and I would like to avoid it.

I think that ideally I would like to tell Meteor that I want Meteor to update the template not when the model has changed, but rather by a query.

+3


source to share


4 answers


Place your list of items in another template inside a scrollable div container:

<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>

JavaScript:

Template.myitems.all_items = function () {
    return Items.find({}, {sort: {name: 1}}).fetch();
}

//Template.items.all_items = function () {
// remove this helper
//}


This way you can keep reactivity without inserting an update request. Only the portion inside the scrollable box is re-rendered, keeping the scrollable container's position in.

Edit: To save / freeze the content you can use the preserve function , a css selector is required as input. eg

Template.items.preserve(['.items-table-container']);
+4


source


Isolate the array iteration.



{{#isolate}}
  {{#each all_items}}
    {{> item}}
  {{/each}}
{{/isolate}}
+3


source


You can use the {{#constant}} helper block to make the whole region constant not execute.

If you have certain DOM elements to persist, you can use Template.myTemplate.preserve (), which takes the selectors of the persisted nodes as arguments.

+1


source


You can also have a jquery handle fixing the scroll position. My use case had something inserted above the current scroll point in the main document text scrolling below.

Not sure how to get the meteor to trigger a callback every time the postset is updated, but you should get an idea:

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


source






More articles:


All Articles