Как предотвратить показ Html до привязки нокаута

Я использую следующие сценарии нокаута в своем Html:

<!-- kno ifnot: bla -->

 <tr><td>some stuff</td></tr>

<!-- /ko -->

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

Как я могу предотвратить это?

Ответ 1

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

<div style="display: none;" data-bind="visible: true">
    <!-- the rest of your stuff -->
</div>

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

Кроме того, вы можете бросить свое представление в блок script и создать его через шаблон. Блоки script не будут отображаться, но будут видны, когда нокаут отображает шаблон.

<!-- ko template: 'myView' --><!-- /ko -->
<script id="myView" type="text/html">
    <!-- the rest of your stuff -->
</script>

Ответ 2

Поскольку поведение, которое вы хотите часто, меняется от страницы к странице - это то, что я делаю в своем файле макета/шаблона (ASP.NET).

 <div class="ko-unbound" data-bind="css: { 'ko-unbound': false, 'ko-bound': true }">
    @RenderBody()
 </div>

Когда страница привязана:

ko-unbound класс удаляется со страницы (изначально добавляется атрибут class). На страницу добавлен класс
ko-bound.

Затем на странице, где нежелательный контент является проблемой, я могу настроить css для отображения или скрытия объектов на основе этих двух классов. Я также использую эту технику, чтобы показать изображение загрузки или, возможно, наложить минимальную высоту для элемента.

.ko-unbound #storeWizard
{
    display: none;  // hide entire section when the page is binding
}

.ko-bound #loadingGraphic
{
    display: none;  // hide loading graphic after page is bound
}

Во время тестирования при применении привязок я добавляю таймаут, чтобы я мог видеть вспышку.

 setTimeout(function ()
 {
     ko.applyBindings(RR.VM);

 }, 300);

Ответ 3

Оберните свой html в нечто вроде этого -

<div id="hideme" style="display:none">
</div>

Затем в вашем JavaScript добавьте следующую строку jquery после привязки привязки -

$('#hideme').show();

Это самый простой метод, который я нашел, что работает. Вы можете сделать это с помощью некоторых привязок нокаута, но вы теряете гарантированное время, потому что вы не можете контролировать привязки заказов.

Ответ 4

Другое решение, которое я нашел здесь

<div id="binding-start" style="visibility:hidden" data-bind="attr: { 'style': 'visibility:visible' }" />

Это имеет преимущество - или недостаток, в зависимости от ваших потребностей - это пространство будет зарезервировано для скрытого контента. Страница не будет "прыгать" при применении привязок.