Override Durandal's display:none behavior in Compose binding

Question

I am using Durandal's compose binding and I am currently running into an issue caused by the fact that Durandal's compose binding sets the injected view's root element to display:none until the activate's promise is resolved.

The issue is that the injected view has a custom binding that needs to know the initial dimensions of its bound element, but because its parent is display:none the element will always have a width/height of 0 pixels.

The solution is to use visibility:hidden instead of display:none during composition, but I can't find a way to override that behavior using the compose binding. Is there a way to specify this in the binding syntax? If not, would it be possible to create a custom transition to get the desired behavior?

Answer 1

It is actually not a really good idea to override behavior of Compose module.

In your case it would be better if you will execute your binding after your View is composed.

For this you need to add your binding to composition bindings after app.start() in main.js:

composition.addBindingHandler('yourBindingName');

In this case your binding will be called in time when root element is already visible and after view composition.

Answer 2

I don't think there's a way to override this behavior in the compose binding. However, I do think you could accomplish this behavior using a custom binding or transition.

For the transition, try modifying the transition so that it sets the view's visibility and display attributes as desired.

The other idea is to use a custom binding that only implements the init function. In this function, you could set the view's attributes.

Now this may work, but I think for either case, you'll probably also have to clear the visibility attribute once you're ready to show it. You could do this from the attached view model function.

---

Another, maybe cleaner, alternative is to consider moving the computation logic to the attached view model function, because at this time, durandal has loaded and displayed the view. If this is suitable, you wouldn't have to mess with the visibility attribute at all.