Knockout.js和大型数据集使得下拉列表也变得缓慢 [英] Knockout.js and large dataset makes dropdown list slow also
问题描述
有谁知道为什么在这个页面上的表现很慢 - 当涉及到 - ALL - 选项的下拉列表时？我必须在knockout.js上做一些错误才会发生。对于较小的游戏列表，它会很快打开。
Javascript
<$ p $函数Schedule（）函数（）函数（app，$，undefined）{
app.viewModel = app.viewModel || {};
函数Schedule {
var self = this;
self.loaded = ko.observable（false）;
self.divisionId = ko.observable（）;
self.games = ko.observableArray（null）;
self.search =函数（url）{
app.call（{
type：'POST'，
data：{divisionId：self.divisionId（）}，
url：url，
success：function（result）{
self.games（[]）;
self .games.push.apply（self.games，result）;
self.loaded（true）;
}
}）;
};
self.init = function（options）{
app.applyBindings（）;
};
};
app.viewModel.schedule = new Schedule（）;
}（window.app = window.app || {}，jQuery））;
模板
< div class =games hiddendata-bind =if：schedule.games（），css：{'hidden'：！schedule.games（）}>
< div data-bind =if：schedule.games（）。length> 0>
< div data-bind =foreach：schedule.games>
< h2>< span data-bind =html：Name>< / span>< / h2>
< hr />
< div class =games rowdata-bind =foreach：Games>
< div class =span4>
< div class =游戏盒子新游戏盒子>
< div class =datetime-header clearfix new-game-box>
< span class =time>< span data-bind =html：DateFormatted>< / span> - < span data-bind =html：TimeFormatted>< / span>< / span>，
< span class =gymdata-bind =text：Venue><< ; /跨度>
< / div>
< div class =team-game clearfix new-game-boxdata-bind =css：{winner：AwayTeamIsWinner}>
< span class =team>
< a target =_ blankhref =＃data-bind =html：AwayTeamName，attr：{href：AwayTeamLink}>< / a>
< / span> < span class =scoredata-bind =html：AwayTeamScoreDisplay>< / span>
< / div>
< div class =team-game clearfix new-game-boxdata-bind =css：{winner：HomeTeamIsWinner}>
< span class =team>
< a href =＃target =_ blankdata-bind =html：HomeTeamName，attr：{href：HomeTeamLink}>< / a>
< / span> < span class =scoredata-bind =html：HomeTeamScoreDisplay>< / span>
< / div>
< div class =buttons clearfix>
< span class =divisiondata-bind =html：'Division'+ DivisionName>< / span> ;,
< span data-bind =text ：GameTypeName>< / span>
< div class =btn-group>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>如果：（schedule.games（）&& schedule.games（）。length == 0），css：{'hidden'：！schedule（
< div class =hiddendata-bind = .games（）}>
未发现此活动的游戏。
比赛将在比赛前一天在这里提供，但是赛程可能已经发布到< a href =@ Url.Action（MVC.Event.Documents（Model.Event.Id，Model.Event.Slug） ））>文件< / a取代。
< / div>
< script type =text / javascript>
app.viewModel.schedule.init（{}）;
< / script>
我下载了您的HTML和CSS并做了一些测试。我能够通过删除下面的CSS来解决这个问题：
.ui-widget：active {
outline： none
}
要在当前页面，执行 document.styleSheets [0] .deleteRule（23）在控制台中。
更多测试表明Chrome（30）中的下拉列表速度很慢。 Firefox（23）和IE（10）没有问题。
Does anyone know why the performance on this page is slow when it comes to the dropdown list on the - ALL - option? I must be doing something wrong with knockout.js for this to happen. For the smaller list of games it opens up quickly.
Javascript
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
function Schedule() {
var self = this;
self.loaded = ko.observable(false);
self.divisionId = ko.observable();
self.games = ko.observableArray(null);
self.search = function(url) {
app.call({
type: 'POST',
data: { divisionId: self.divisionId() },
url: url,
success: function (result) {
self.games([]);
self.games.push.apply(self.games, result);
self.loaded(true);
}
});
};
self.init = function (options) {
app.applyBindings();
};
};
app.viewModel.schedule = new Schedule();
} (window.app = window.app || {}, jQuery));
Template
<div class="games hidden" data-bind="if: schedule.games(), css: { 'hidden': !schedule.games() }">
<div data-bind="if: schedule.games().length > 0">
<div data-bind="foreach: schedule.games">
<h2><span data-bind="html: Name"></span></h2>
<hr />
<div class="games row" data-bind="foreach: Games">
<div class="span4">
<div class="game game-box new-game-box">
<div class="datetime-header clearfix new-game-box">
<span class="time"><span data-bind="html: DateFormatted"></span> - <span data-bind="html: TimeFormatted"></span></span>,
<span class="gym" data-bind="text: Venue"></span>
</div>
<div class="team-game clearfix new-game-box" data-bind="css: { winner: AwayTeamIsWinner }">
<span class="team">
<a target="_blank" href="#" data-bind="html: AwayTeamName, attr: { href: AwayTeamLink }"></a>
</span> <span class="score" data-bind="html: AwayTeamScoreDisplay"></span>
</div>
<div class="team-game clearfix new-game-box" data-bind="css: { winner: HomeTeamIsWinner }">
<span class="team">
<a href="#" target="_blank" data-bind="html: HomeTeamName, attr: { href: HomeTeamLink }"></a>
</span> <span class="score" data-bind="html: HomeTeamScoreDisplay"></span>
</div>
<div class="buttons clearfix">
<span class="division" data-bind="html: 'Division ' + DivisionName"></span>,
<span data-bind="text: GameTypeName"></span>
<div class="btn-group">
<a rel="nofollow, noindex" title="Add to calendar" href="#" class="btn btn-mini" data-bind="attr: { href: CalendarLink }"><i class="icon-calendar"></i></a>
<a target="_blank" title="Gym Details" href="#" class="btn btn-mini" data-bind="attr: { href: GymLink }"><i class="icon-map-marker"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" data-bind="if: (schedule.games() && schedule.games().length == 0), css: { 'hidden': !schedule.games() }">
No games found for this event.
Scores will be available here the day before the event however the schedule might already be posted under <a href="@Url.Action(MVC.Event.Documents(Model.Event.Id, Model.Event.Slug))">documents</a>.
</div>
<script type="text/javascript">
app.viewModel.schedule.init({});
</script>
I downloaded your HTML and CSS and did some testing. I was able to fix the problem by removing the following CSS:
.ui-widget :active {
outline: none
}
To test this on the current page, execute document.styleSheets[0].deleteRule(23) in the console.
Some more testing showed that the drop-down is only slow in Chrome (30). Firefox (23) and IE (10) don't have the problem.
这篇关于Knockout.js和大型数据集使得下拉列表也变得缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
