Проблема с мерцанием нокаута

Я создаю SPA (одностраничное приложение) с помощью KO. приложение выглядит как книга, и пользователь может перелистывать страницы.

Проблема в том, что каждый раз, когда страница загружается, бывает короткий момент, когда страница «мерцает», и пользователь видит нестилизованную версию страницы. Я предполагаю, что это вызвано тем фактом, что большая часть стилей зависит от привязок ko, поэтому, пока ko не завершит его «волшебством», пользователь может получить представление о нестилизованном коде.

Можно ли узнать, когда KO завершил все свои привязки и только потом показать страницу?

Мне удалось частично решить эту проблему, установив тайм-аут перед загрузкой представления, но, конечно, это не очень хорошее решение.


javascript single-page-application knockout.js singlepage
person Tomer    schedule 29.01.2013    source источник
comment
вы могли бы подумать, чтобы переделать, как выполняются привязки ваших страниц. Не могу сказать много, не видя кода, но вы можете справиться с рендерингом своей страницы и назначить свои наблюдаемые на странице с помощью привязки afterRender.   -  person Thewads    schedule 29.01.2013

Ответы (2)


arrow_upward
56
arrow_downward

Да, на самом деле это очень просто. Примените display:none к верхнему уровню div (или с контейнером) и data-bind="visible: true". Это приведет к тому, что страница будет скрыта до тех пор, пока нокаут не отобразит ее через привязку (что, очевидно, не может произойти, пока она не будет полностью загружена).

Поскольку вы используете ненаблюдаемое значение, Knockout даже не потрудится перепроверить это снова. После первоначальной привязки не должно быть проблем с производительностью.

person Kyeotic    schedule 29.01.2013
comment
Идея крутая, попробую, и если сработает, обязательно отметлю ваш ответ :) - person Tomer; 29.01.2013
comment
Чтобы расширить это, вы можете применить привязку к анимации загрузки DIV, которая перекрывает область, в которой вы пытаетесь предотвратить мерцание. После инициализации основного приложения вы можете скрыть оверлей, открыв приложение. Одним из преимуществ этого является то, что логическая видимость элементов приложения не нарушается, поэтому любая логика привязки / настройки может работать правильно. Еще одна вещь - если отображение автоматически, когда KO-обработки привязки недостаточно, вы можете привязать к флагу в вашей модели представления, который вы установили, чтобы указать, когда ваша инициализация завершена. - person Joseph Gabriel; 30.01.2013
comment
Что я вижу с выбранным ответом, так это то, что элемент, который изначально скрыт, мигает после загрузки страницы. Что, я думаю, подходит для моей цели. Если я сделаю наоборот, сделаю его видимым, а затем использую нокаут видимой привязки, чтобы скрыть это, я думаю, эффект будет хуже. Мне нужно и то, и другое, потому что элемент должен быть показан / скрыт в зависимости от другого состояния на странице, которое изменяется по мере взаимодействия с ним пользователя. Есть идеи для этого случая? - person Evan; 09.09.2016
comment
Да, просто измените видимую привязку, чтобы использовать все наблюдаемые, отслеживающие состояние, в котором вы заинтересованы. - person Kyeotic; 10.09.2016
comment
более надежно применить static css к целевому элементу, а затем выполнить JS для удаления стиля (через ko.subscribe или более явно, например: после вызова ko.applyBindings или в обратном вызове к любому init / ajax методы, которые вы можете вызвать перед показом представления.) проблема с использованием статических значений true / false и последующим использованием data-bind заключается в том, что eval откладывается до тех пор, пока ko.applyBindings не начнет выполнение, тогда как статический CSS применяется во время оценки разметки (предварительно -render.) удаление стиля через JS позволяет действительно отложить отображение до завершения привязки - person Shaun Wilson; 03.02.2017
comment
Я не думаю, что это правильно. Атрибуты стиля и статический CSS применяются во время оценки разметки. data-bind атрибуты являются наблюдаемыми. Это JS, который применяется после завершения ko.applyBindings привязки. Они одно в одном. - person Kyeotic; 03.02.2017
comment
Не могу поднять этот ответ достаточно! - person Leonardo Wildt; 07.09.2017

arrow_upward
4
arrow_downward

Я думаю, что раньше на этот вопрос лучше ответили с помощью шаблонов.

Как лучше всего скрыть экран во время создания привязок knockout js?

person Matthew Will    schedule 01.11.2013