Easy "hide until rendered" option

[scriby]

Hi,

We use inline templates, and with base knockout there's a flashing effect as the base HTML gets bound into the rendered template. An approach I've adopted is to add this to the root element I'm binding against:

<div id="binding-start" style="visibility:hidden" data-bind="attr: { 'style': 'visibility:visible' }" />
(I used to do style: '', but oddly it doesn't work in IE8, so I had to go with the more verbose form shown)

I would love it if knockout could provide some base way to the "hide until rendered" functionality. Something like this would work well for us, but there are probably some other options:

<div id="binding-start" class="ko-not-rendered">

We can define the ko-not-rendered class to be hidden in our stylesheet, and knockout can remove the class when it binds.

Thanks for considering this,

Chris

[gmac]

+1. This is a very common display issue with using Knockout templates. While there are workarounds (like the one mentioned above), the intent behind them is not obvious. Given that templating is a staple concept within the Knockout system, it would be really nice if the framework prescribed an approach here.

[alexdresko]

I'm also looking for a solution to this. I have some ideas and haven't done exhaustive research, but figured I'd show some interest in this thread.

[paglias]

This could be easily fixed using afterRender to remove a class that hide the element until it has been rendered

[jrsearles]

I like the idea of this. I definitely think it'd be useful. You could pretty easily do this with a simple binding like this:

ko.bindingHandlers["showOnBind"] = {
    init: function(element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        if (value) {
            $(element).css("visibility", "visible");
       }
    }
};
<div id="binding-start" style="visibility:hidden" data-bind="showOnBind: true" />

basically what you are already doing but in a way that is more explicit.

[SteveSanderson]

To help us focus on more highly-prioritised issues, we're tidying up our issue backlog. We're closing the oldest feature requests that don't have pull requests and score very low on our triage ranking system. The low triage score for this feature request suggests we should focus our finite resources on other issues. For more details, see here. Thanks for posting this feature request though. If you still actively want this feature, please reopen this issue, or post a new one (and ideally, be prepared to supply a pull request if we agree the feature would be accepted). Thanks!