Tái dựng hình mẫu gây ra các trang để di chuyển đến đầu

Question

Tôi có một số mẫu mà trông gần như thế này:

<template name="items"> 
    <div class="item-list"> 
    {{#each items}} 
     {{> item}} 
    {{/each}} 
    <div> 
    {{> loadMore}} 
</template> 

<template name="item"> 
    <div class="item" id="{{unique_string}}"> 
    <!-- stuff here --> 
    </div> 
</template> 

<template name="loadMore"> 
    <a href="#">Load more...</a> 
</template> 

Với javascript liên quan:

Template.items.items = function() { 
    return Items.find({}, {limit: Session.get("itemCount")}); 
} 

Template.loadMore.events({ 
    "click": function() { 
    Session.set("itemCount", Session.get("itemCount") + 10); 
    } 
}) 

Tất cả những gì với nhau hơn hoặc ít hơn mang lại cho tôi một cái gì đó mà khá nhiều công trình như một phần cuộn vô hạn. (Mã thực tế có một vài bộ phận chuyển động nhiều hơn, nhưng điều này là bit quan trọng.)

Bất cứ khi nào tôi bấm vào loadMore, tuy nhiên, nó cả kéo dữ liệu hơn xuống và cuộn tôi trở lại phía trên cùng của trang, thay vì đánh bại mục đích của cuộn vô hạn. Tôi có thể ném vào một số javascript để di chuyển xuống đến nơi nó nên được, nhưng điều đó để lại một nhấp nháy khó chịu khi trang nhảy xung quanh quicly.

Tôi đã thử sử dụng preserve trên toàn bộ danh sách cũng như trên mỗi mục div để giữ cho chúng không được cập nhật, nhưng điều đó dường như không ngừng cuộn. Tôi cũng đã cố gắng đặt {{#isolate}} khối xung quanh chỉ là về bất kỳ và tất cả mọi thứ, mà không có bất kỳ may mắn.

Có điều gì tôi có thể làm ở đây để làm cho trang không cuộn xung quanh khi trang này hiển thị lại không? Soạn mẫu khác nhau? Một số khía cạnh của preserve hoặc {{#isolate}} mà tôi đã bỏ lỡ?

Answer 1

Trang cuộn lên đầu vì <a href="#">Load more...</a> của bạn sẽ làm cho trang cuộn lên trên cùng. Khi href của bạn liên kết đến "#", trang sẽ cuộn đến phần tử DOM có # "id phần tử". Nhấp vào liên kết chỉ có "#" sẽ cuộn lên đầu.

Bạn có hai lựa chọn:

1. Ngăn chặn hành vi mặc định trên các sự kiện nhấp chuột (dễ dàng tùy chọn):

   Template.loadMore.events({ 
   "click": function(event) { 
       event.preventDefault(); 
       Session.set("itemCount", Session.get("itemCount") + 10); 
   } }) 
   

   Điều này sẽ ngăn chặn các tải lại trang

2. Thậm chí tốt hơn: làm liên kết <a href="#">Load more...</a> tới "#{{_id}}" thì trang sẽ tự động cuộn đến phần tử có id bạn đã cung cấp. Điều này sẽ yêu cầu một số cơ cấu lại các mẫu và có thể là một phương thức trợ giúp trong mẫu để cung cấp cho bạn id của mục cuối cùng. Nhưng nó sẽ làm cho trang của bạn tải chính xác nơi bạn muốn.