How do I avoid expanding sections when using a composed view?

Question

At various places in my single page app I use composition to compose one view into another. At the same time I have noticed some animation effects when certain pages load, almost as if sections were dynamically expanding as binding, etc. took place. I am pretty sure that this has nothing to do with Durandal's transitions as I disabled that and still got the expanding "animation" effect.

This morning I created a new view, copied some existing HTML from another view into it and replaced this HTML in the parent view with the new composed child view. In other words, the parent view went from this:

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

to this:

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

Upon testing this change I immediately noticed that the original version had no expanding animation effect while the composed version does. After playing around with the Durandal transitions I came to the conclusion that this is quite possibly not related to that but more probably due to delayed insertion of the child view HTML.

The new child viewmodel is extremely simple so I see no issues there, unless it has to do with the fact that it is not a singleton, which it cannot be in this case.

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;
        };
    });

Can anybody help me figure out how to get rid of the transition effect? I can post a video of the before and after if somebody wants to take a look at it.

Is it really an "expanding effect," or just the fact that you are inserting a composed view, which is necessarily pushing everything below downward? — , Sep 14 '14 at 01:32
I would say it is the latter - I was just trying to describe how it looks. The point still remains that using composition causes this effect and I would prefer that it doesn't :). Is this just the cost of composing one view into another? — Rhynier, Sep 17 '14 at 05:52

score 1 · Answer 1 · answered Sep 17 '14 at 16:21

Composition does not, in itself, cause the effect you are witnessing. It is most likely a CSS issue. We witnessed the same effect many times (particularly when trying to position a wait spinner) and it was always the CSS.

In those cases where we want to "make room" for an incoming view, we set our CSS on the container that will hold the view in such a way as to have that container "expanded" already, so to speak. Think "placeholder," if you will.

score 0 · Answer 2 · answered Sep 15 '14 at 14:16

0

If you are in debug mode with caching disabled then the composition binding is much slower than in a built app. You see this effect because of the debug mode and how it is writing and evaluating each binding to the console as well. If you want to disable it turn off debug mode or look at the built version of your application.

answered Sep 15 '14 at 14:16

PW Kad

14,953
7
49
82

Thank you for the advice. I did have debug mode enabled (assuming you're speaking of Durandal's debug flag) and went back and disabled it. It did have an effect by making the effect seem less like an expanding animation and more like an annoying flicker (a slow flicker). – Rhynier Sep 17 '14 at 05:54
Also consider using weyland or grunt to build your app which speeds it up tremendously before going to production – PW Kad Sep 17 '14 at 12:36

How do I avoid expanding sections when using a composed view?

2 Answers2