2014-09-13 2 views
0

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

Сегодня утром я создал новый вид, скопировал какой-то существующий HTML из другого представления в него и заменил этот HTML-код в родительском представлении новым скомпонованным дочерним представлением. Другими словами, родительский вид пошел от этого:

<div data-bind="visible: contactPerson, with: contactPerson"> 
    <span data-bind="text: firstName"></span><br /> 
    <span data-bind="text: lastName"></span><br /> 
</div> 

к этому:

<div data-bind="compose: { model: 'viewmodels/contact-view', activationData: { contactPerson: contactPerson } }"></div> 

После тестирования этого изменения, я сразу заметил, что оригинальная версия не имела расширяющуюся эффект анимации в то время как сочинял версия делает. После игры с переходами Дюрандаля я пришел к выводу, что это, возможно, не связано с этим, но, скорее всего, из-за задержки вставки представления HTML-представления для детей.

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

define(['services/dataservice', 
     'services/logger'], 
    function (dataservice, logger) { 
     return function() { 
      var self = this; 

      var contactPerson = ko.observable(); 

      var activate = function (activationData) { 
       contactPerson(ko.unwrap(activationData.contactPerson)); 
      }; 

      // Make sure required internally defined functions and properties are exported. 
      self.activate = activate; 
      self.contactPerson = contactPerson; 
     }; 
    }); 

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

+0

Действительно ли это «эффект расширения» или просто тот факт, что вы вставляете скомпилированный вид, который обязательно подталкивает все ниже вниз? – 2014-09-14 01:32:23

+0

Я бы сказал, что это последнее - я просто пытался описать, как это выглядит. Дело по-прежнему остается в том, что использование композиции вызывает этот эффект, и я бы предпочел, чтобы это не было :). Это просто стоимость составления одного взгляда на другой? – Rhynier

+0

Посмотрите, пожалуйста, на мой ответ ниже. – 2014-09-17 16:21:43

ответ

0

Если вы находитесь в режиме отладки с отключенным кэшированием, привязка композиции намного медленнее, чем в встроенном приложении. Вы видите этот эффект из-за режима отладки и того, как он пишет и оценивает каждую привязку к консоли. Если вы хотите отключить его, отключите режим отладки или посмотрите на встроенную версию вашего приложения.

+0

Спасибо за совет. У меня был включен режим отладки (предполагая, что вы говорите о флаге отладки Durandal) и вернулся и отключил его. Это действительно повлияло на то, что эффект кажется менее похожим на расширяющуюся анимацию и больше похож на раздражающее мерцание (медленное мерцание). – Rhynier

+0

Также рассмотрите возможность использования weyland или grunt для создания вашего приложения, которое значительно ускоряет его до выхода на производство –

1

Композиция сама по себе не вызывает эффект, который вы наблюдаете. Это, скорее всего, проблема с CSS. Мы наблюдали тот же эффект много раз (особенно при попытке расположить счетчик ожидания), и это всегда был CSS.

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

Смежные вопросы