Question

I had shell view with few sub views – which looks like that and work fine.

<div id="shellView" style="display: none;">
<div id="tabView" data-bind="with: Tab(), visible: State() === 'Tab'">
    @Html.Partial("Tab")
</div>
<div id="tab2View" data-bind="with: Tab2(), visible: State() === 'Tab2'">
    @Html.Partial("Tab")
</div>

the problem is when switching beetween tabs(only on chrome). One tab has a list of images binded with knockout – all images had src to Action (RedirectResult) on controller which redirect to our server or to client server and download images:

   [HttpGet]
    public RedirectResult DynUrl(int id, string size)

Second tab is at this point empty – but when I switch to them google chrome making requests to all DynUrl’s downloading again images – which is currently downloaded – just hidden.

I’m using knockout 2.1.0.

Answer 1

should work like

<div id="shellView" style="display: none;">
<!-- ko with: Tab -->
<div id="tabView" data-bind="attr: {display: isVisible}">
    @Html.Partial("Tab")
</div>
<!-- /ko -->
<!-- ko with: Tab2 -->
<div id="tab2View" data-bind="attr: {display: isVisible}">
    @Html.Partial("Tab")
</div>
<!-- /ko -->

and put a

this.isVisible = ko.computed(function(){
if(self.visibleState())return 'block';
else return 'none';
});

on the tab viewmodel