problem with data-tab in af3.0

[madgrizzle]

The data-tab functionality isn't working for me in af3.0. Maybe I'm not using views correctly (it's new to me), but when I set data-tab in a panel to equal the id of a footer's tab element, it doesn't update the button as pressed when I use loadContent to go to that panel.

<div class="view" id="resourceview">
    <div class="pages">
        <div title="Resources" id="selectasset" class="panel" data-tab="assettab">
            <div id="viewresourcelistdiv"></div>
        </div>
        <div title="Resource List" id="viewresourcelist" class="panel" data-tab="assettab">
            <div id="viewresourcelistdiv"></div>
        </div>
        <footer>
            <a href="#afstart" id="hometab" class='icon home'>Home</a>
            <a href="#events" id="eventstab" class="icon star">Events</a>
            <a href="#viewnets" id="commstab" class="icon wifi">Comms</a>
            <a href="#selectasset" id = "assettab" class="icon database">Resources</a>
            <a href="#settings" id="settingstab" class="icon settings">Settings</a>
        </footer>
    </div>
</div>

I got it to work by modifying the code for setActiveTab as follows:

    setActiveTab:function(ele,view){
        var hash;
        if(typeof(ele)!=="string")
            hash=$(ele).attr("data-tab"); // was .prop("id")
        //hash="#"+hash;
        console.log("hash="+hash);
        view.find("footer").find("a").removeClass("pressed").attr("data-ignore-pressed","true").filter("[id='"+hash+"']").addClass("pressed"); // was.filter("[href="+hash+"]")
    },

Am I using data-tab incorrectly or is it a bug? With the original code, hash equals the href of the panel I'm loading within a particular view. The first time I go into the view, it's good because the href in the footer (#selectasset) is the same as the href of the first panel (#selectasset). However, when I loadContent to get to the second panel whose href is #viewresourcelist, it doesn't equal the href in the footer and the icon is no longer "pressed". The original code appears to remove all pressed states and then puts it back onto the one that's found when searching for the href. When the href of the second panel isn't found, it stays un-pressed. By using the code above, it seems to work (as long as I have a data-tab in each panel).

If the intent is that each view is defined by a unique "tab" in the footer (maybe I'm wrong about this), then shouldn't there just be something like "data-active-tab" set on the particular footer element for that view and search for that?

<div class="view" id="resourceview">
    <div class="pages">
        <div title="Resources" id="selectasset" class="panel">
            <div id="viewresourcelistdiv"></div>
        </div>
        <div title="Resource List" id="viewresourcelist" class="panel">
            <div id="viewresourcelistdiv"></div>
        </div>
        <footer>
            <a href="#afstart" class='icon home'>Home</a>
            <a href="#events" class="icon star">Events</a>
            <a href="#viewnets"  class="icon wifi">Comms</a>
            <a href="#selectasset" data-tab-active="true" class="icon database ">Resources</a>
            <a href="#settings" class="icon settings">Settings</a>
        </footer>
    </div>
</div>

    setActiveTab:function(ele,view){
        view.find("footer").find("a").removeClass("pressed").attr("data-ignore-pressed","true").filter("[data-tab-active="true").addClass("pressed");
    },

Or better yet, could we just set "pressed" in the class and be done with it all?

<div class="view" id="resourceview">
    <div class="pages">
        <div title="Resources" id="selectasset" class="panel">
            <div id="viewresourcelistdiv"></div>
        </div>
        <div title="Resource List" id="viewresourcelist" class="panel">
            <div id="viewresourcelistdiv"></div>
        </div>
        <footer>
            <a href="#afstart" class='icon home'>Home</a>
            <a href="#events" class="icon star">Events</a>
            <a href="#viewnets"  class="icon wifi">Comms</a>
            <a href="#selectasset" class="icon database pressed ">Resources</a>
            <a href="#settings" class="icon settings">Settings</a>
        </footer>
    </div>
</div>

[imaffett]

This is a bug. I'll check it out.

What you can do for now is set data-ignore-pressed on the footer - this will then prevent setting the pressed state.

 <footer data-ignore-pressed="true">
            <a href="#afstart" class='icon home'>Home</a>
            <a href="#events" class="icon star">Events</a>
            <a href="#viewnets"  class="icon wifi">Comms</a>
            <a href="#selectasset" class="icon database pressed ">Resources</a>
            <a href="#settings" class="icon settings">Settings</a>
        </footer>

[madgrizzle]

Is there any situation where your workaround is not the best solution? Am I correct in my understanding that in AF3.0 that you have one footer per view and the pressed footer button should always correspond to its view?

[imaffett]

@madgrizzle "that you have one footer per view and the pressed footer button should always correspond to its view?"

Each view can have N number of pages/panels. Your footer button corresponds to the page, not the view.