3

私の質問はこれとあれと非常に似て いますが、まったく同じではありません。

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

したがって、基本的には、テーブルに固定サイズの領域内にスクロール可能なコンテンツを含める必要があります。問題は、あるブラウザでアイテムテーブルの内容を下にスクロールしてから、別のブラウザで新しいアイテムを追加すると始まります。最初のブラウザはアイテムのリストを更新し、コンテンツを一番上の位置にスクロールして戻します。

問題は、単一のテンプレートの自動更新を防ぐにはどうすればよいですか？この特定のケースでは、実際には従来のWebページの更新のようなものが必要だと思います。ユーザーが新しく追加されたアイテムをすぐに表示せず、ページをリロードした後で表示されれば問題ありません。

もう1つのアイデアは、スクロール可能なコンテンツの代わりに、ある種のページ付けを行うことです。それで問題は解決すると思いますが、もっと複雑になるので避けたいと思います。

理想的には、モデルが変更されたときではなく、リクエストによってMeteorにテンプレートを更新してほしいことをMeteorに伝えたいと思います。

4

4 に答える 4

4

アイテムのリストを、スクロール可能な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>

Javascript：

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

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

このようにして、更新を要求せずに反応性を維持できます。スクロール可能なボックス内の部分のみが再レンダリングされ、スクロール可能なコンテナがスクロールされた位置が維持されます。

編集：コンテンツを保存/フリーズするには、保存機能を使用できます。入力としてcssセレクターを使用します。例えば

Template.items.preserve(['.items-table-container']);
于 2013-02-08T10:40:51.410 に答える
3

配列の反復を分離します。

{{#isolate}}
  {{#each all_items}}
    {{> item}}
  {{/each}}
{{/isolate}}
于 2013-07-21T03:13:20.140 に答える
1

領域全体を一定にして再レンダリングされないようにするには、ブロックヘルパー{{#constant}}を使用できます。

保存する特定のDOM要素がある場合は、保存するノードのセレクターを引数として取るTemplate.myTemplate.preserve（）を使用できます。

于 2013-02-08T22:24:27.057 に答える
-1

スクロール位置を修正する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) )
于 2013-08-29T15:55:13.817 に答える