Question

我遇到了与Blaze重绘相关的严重性能问题。我知道我的数据结构有问题，但我找不到解决方法。这有点长：我会尽力把它清楚地说出来。

目标/问题
我想创建一个用户可以安排测试的计划视图。用户应该能够拖放测试槽，但生成的重绘速度太慢，以至于事情不可行。

数据
我有一个Sittings集合，其中包含有关测试时间的详细信息。每次会议都有scheduleGroups列表（即考试1和考试2发生在星期二，考试3和考试4发生在星期三）结构看起来或多或少是这样的：

var sitting = {
  "_id" : "sittingId",
  "name" : "Amazing Sitting",
  "locationIds" : [
    "room1_id",
    "room2_id"
  ],
  "startDate" : ISODate("2015-07-01T04:00:00Z"),
  "endDate" : ISODate("2015-07-02T04:00:00Z"),
  "scheduleGroups" : [
    {
        "_id" : "dEb3mC7H8RukAgPG3",
        "name" : "New group",
        "booths" : [
            {
                "boothNumber" : 1,
                "slots" : [
                    {
                        "examId" : "exam1",
                        "dayNumber" : 1,
                        "startTime" : {
                            "hour" : 8,
                            "minutes" : 0
                        },
                        "endTime" : {
                            "hour" : 9,
                            "minutes" : 30
                        },
                        "candidateId" : "odubbD42kHDcR8Egc",
                        "examinerIds" : [
                            "GQmvyXbcmMckeNKmB",
                            "GfoBy4BeQHFYNyowG"
                        ]
                    }
                ]
            }
        ]
        "locationId" : "room1_id"
    }],
  "examIds" : [
      "exam1",
      "exam2",
      "exam3"
  ]

};

HTML
坐在Router.current().data钩子中被定义为全局上下文。这是重绘问题的一部分。无论如何，以下HTML生成以下布局（img如下）。

<template name='scheduler'>
<div class='container'>
    <div class='tabpanel'>
        <div class='tab-content' id='scheduler-content'>
            {{#each getScheduleGroups}}
            <div class='container-fluid schedule-wrapper'>
                <div class='row'>
                    <div class='scheduler-inner-box placeholder-box'></div>
                    {{#each booths}}
                    <div class='group-column-head scheduler-inner-box'>{{boothNumber}}</div>
                    {{/each}}
                </div>
                <!-- Sittings can take place over several days, normally 2 days -->
                {{#each sittingDays}}
                <div class='day-wrapper'>
                    <h3 class='text-center'>Day {{this}}</h3>

                    <!-- This helper returns a list of start times: [June 1 9AM, June 1 915AM....] -->
                    {{#each getScheduleTimes ..}}
                    <div class='row time-row'>
                        <div class='group-row-head scheduler-inner-box'>
                            <span class='box-content'>{{this}}</span>
                        </div>
                        <!-- Loop through each booth, so that each slot has a square for that boot
                            i.e. June 1 9AM has space for booth 1, and booth 2, and booth 3, etc
                         -->
                        {{#each ../../booths}}
                        <!-- Paper starting now tells us if there is a slot scheduled to begin at this time or wher its empty-->
                        <div  class='scheduler-inner-box {{#unless paperStartingNow ../.. ..}}open-booth{{/unless}}'>
                            {{#with paperStartingNow ../.. .. boothNumber}}
                            <!--
                                getSlotStyle calculates height and colour, depending on how long the paper is and whether
                                it's ready to go: i.e. does it have a candidate and the right number of examiners?
                            -->
                                <div  class='paper-tile tile' {{getSlotStyle this ../boothNumber 'paper'}}>
                                    <span class='slot-name'>{{getSlotName}}</span>
                                </div>
                                {{#if slotHasCandidate}}
                                <div class='candidate-tile tile' {{getSlotStyle this ../boothNumber 'candidate'}}>
                                    <span class='slot-name candidate-name'>{{getCandidateDisplay}}</span>
                                </div>
                                {{/if}}
                                    {{#each slotExaminers}}
                                    <div class='examiner-tile tile' {{getSlotStyle .. ../../boothNumber 'examiner' index}}>
                                        <span class='slot-name examiner-name'>{{profile.name}}</span>
                                    </div>
                                    {{/each}}
                            {{/with}}
                        </div>
                        {{/each}}
                    </div>
                    {{/each}}
                </div>
                {{/each}}
            </div>
            {{/each}}
        </div>
    </div>
</div>

Rendered layout

问题当用户将一个插槽（紫色瓷砖）放到一个空白区域，或者将一个候选人或考官拖到另一个瓷砖上时，我会更新该集合并让Meteor重绘。然而，整个事情重新绘制，我找不到隔离的方法。

以下是移动整个插槽，候选审查员和所有人的代码。

moveSlot: function (originalBoothNumber, originalSlot, dropBoothNumber, newSlot) {
    check( originalBoothNumber, Number );
    check( originalSlot, Object );
    check( dropBoothNumber, Number );
    check( newSlot, Object );

    //pull the old slot
    var originalBooth = _.findWhere( this.booths, {boothNumber: originalBoothNumber} );
    originalBooth.slots = _.without( originalBooth.slots, originalSlot );

    //insert the new one
    var dropBooth = _.findWhere( this.booths, {boothNumber: dropBoothNumber} );
    dropBooth.slots.push( newSlot );

    var modifier = {
        $set: {}
    };

    modifier["$set"]["scheduleGroups." + this.getIndex() + ".booths"] = this.booths;
    return Sittings.update({_id: this.getSitting()._id }, modifier);
},

我是否需要更改存储Sitting.booths的方式？如果有人可以推荐更好的数据结构来触发重新插入，我真的很感激。我找到了一个将每个插槽放入会话变量的黑客，但必须有另一种方式。

感谢您的耐心和帮助，分贝

Answer 1

问题

这是因为您将整套slots存储在booth的一个文档中。更新slot后，系统会考虑更新整个文档。

解决方案的

恕我直言，我认为你不需要改变结构，除非你已经建立了一个搜索slot或booth的功能。您可以通过创建一系列reactiveVariable或reactiveDictionary进行设置，您的模板应仅依赖于该反应变量。每次更新时，请考虑手动或自动同步其中两个。

PS。我没有与此网站建立任何关联公司：https://www.sportsplus.me。但如果你注册 - ＆gt; home - ＆gt; mlb - ＆gt; anycontest - ＆gt;点击加号，你可以看到他们的杰作无限滚动部分重绘。（打开你的开发控制台并观察元素的变化）。它们与您尝试以最小重绘完成相同的操作。

Meteor / Blaze：用最少的重绘更新列表属性

1 个答案: