We Keep Coding

Foundation accordion-menu is not updating after dynamic add of node using knockout

I am trying to simulate a tree view using Foundation framework and Knockout.
I have a Foundation accordion-menu which I am starting off with just a few nodes. As I click the accordion menu, I am querying the database and adding the child folders at this point.
I have based my tree view from the building block available at this link:
http://foundation.zurb.com/building-blocks/blocks/multilevel-accordion-menu.html
My HTML code looks like this
<ul id="treeview" data-bind='template: { name: "nodeTmpl", foreach: treeview }' class="multilevel-accordion-menu vertical menu" data-accordion-menu></ul>
<script id="nodeTmpl" type="text/html">
<li data-bind="click: $root.goToFolder">
<a href="#" data-bind='text: node().DecryptedName'></a>
<ul class="menu vertical sublevel-1" data-bind='attr: {id: "ul_" + node().ResourceId }, template: { name: "nodeTmpl", foreach: children }'></ul>
</li>
</script>
My method goToFolder updates the object to add the nodes required.
My problem is that after this happens the accordian-menu doesn't refresh. It works like a charm if I run the following code, but this minimizes all the folders again which I don't want.
$('#treeview').foundation('destroy');
$('#treeview').foundation();
I have searched and searched but haven't found anything that works, including the following:
Foundation.reInit($('#treeview'));
Foundation.reInit('accordion-menu');
Can anyone suggest how I reinstate the accordion-menu without having to destroy each time?

How to dynamically add/remove .current class to each nav link that is clicked using multiple .html pages?

Synopsis
I am attempting to create a sample header navigation that dynamically adds .current class to each menu link that is clicked. I am trying to accomplish this with JavaScript and/or jQuery with multiple .html pages.
Known bugs to look into
Right now the .current class simply blinks on briefly when link is clicked, but is removed immediately.
Logged message for which navigation link was clicked does not remain in the console. Currently flashes briefly then is removed immediately.
Questions
Is it possible to dynamically add/remove .current class to each link
that is clicked using multiple .html pages or would I be
better off using something like MVC or a framework such as angular.js?
Would it be better to have the jQuery reference script at the bottom of the
page right before the closing body tag?
Sample Project
My header navigation look like this:
<nav>
<ul id="headerNav">
<li>
<a id="home" class="headerLink" href="index.html">Home</a>
</li>
<li>
<a id="about" class="headerLink" href="about.html">About</a>
</li>
</ul>
</nav>
My script.js file looks like this.
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function () {
'use strict';
console.log("dom is ready!");
initHeaderNavLinks();
});
function initHeaderNavLinks() {
console.log("initializing header nav links...");
// add current class to first link in header navigation
$('#headerNav li:first a').addClass("current");
}
$('.headerLink').click(function() {
var clickedId = $(this).attr('id');
var msg = "";
msg = "clickedId: " + clickedId;
console.log(msg);
$(this).addClass('current');
});
Here is my sample project in Plunker.
https://plnkr.co:443/pVPDBfjmhqaIwnMEtMgm
UPDATE
For those that are interested, I found a solution that works best for my current needs and simplifies my code. I decided to embed the currentPageID variable directly on each page in a script tag.
Updated Project
Added this script tag to the head of each page
<script>
var currentPageID = "about";
</script>
My header navigation now look like this:
<nav>
<ul>
<li>
<a id="home" href="index.html">Home</a>
</li>
<li>
<a id="about" href="about.html">About</a>
</li>
</ul>
</nav>
My script.js file looks like this.
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function () {
'use strict';
console.log("dom is ready!");
console.log("currentPageID: " + currentPageID);
$("#" + currentPageID).addClass('current');
});
Here is my updated Plunker project https://plnkr.co/pVPDBfjmhqaIwnMEtMgm

Since you will be straying away from your current page, you need to have some form of persistence.
You have a few options between Session Storage, Local Storage and Cookies.
Cookies are the old fashioned way for web page persistence and generally they are supported by most browsers.
Session Storage only stores information for the current session. If the user closes the window, this storage is cleared. Which is probably the most practical for your scenario.
Local Storage on the other hand, functions the same was as session storage, however, items in Local Storage have to be explicitly deleted, or the cache is cleared.

If you can't write into the page, (in this case i would use html5 data-whatever attributes to keep values, with .dataset.whatever to retrieve).
What you can do is using "#" anchors on your url, then retrieve it with javascript.
And the regular old but robust way for personnal client settings is for sure to use cookies.

How to remove AddThis fragment identifiers (hash) from Facebook button? (Twitter's worked)

I'm trying to use Twitter and Facebook AddThis buttons in my Web app, and don't like to use those redundant fragment identifiers. However, for some reasons when I disable its tracking functionality in my app, it works only on Twitter button and not on Facebook button. I don't see any differences between the two buttons code...
Anyway, here's my code snippet:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_2 btn-addthis" addthis:url="path/to/my/url"></a>
<a class="addthis_button_preferred_1 btn-addthis" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
I implemented the second <script> in order to disable the fragment identifiers. However, when I tapped the Twitter button, the hash was successfully removed completely and just the url was there. However, the Facebook button didn't work, and the hash remained to be there for some reasons.
Why does this occur? I tried to move the second <script> tag before the first <script> but it didn't change at all (by the way which <script> should I write the first?)
And also, the reason I swapped the button with .addthis_button_preferred_1 with the one with .addthis_button_preferred_2 is that I want to display the twitter button before the Facebook button, but for some reasons, it's not swapped properly at times (about 15 ~ 20 % of the time) and the Facebook button is displayed first for some reasons... Maybe the whole AddThis functionality doesn't work...?

You should not use preferred if you want facebook and twitter only. Because if you use preferred it will set the share buttons to that users preferred social community. addthis_button_facebook for facebook and addthis_button_twitter for twitter.
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" addthis:url="path/to/my/url"></a>
<a class="addthis_button_twitter" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
I don't think you need the script, but if you do try instead to remove the class addthis_toolbox.

batman.js data-route adding characters to url

I have a html template doing this.
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing].new" data-bind="thing.id"></a>
</li>
</ul>
The data-route attribute is returning a url like this:
http://localhost:3000/#!/things/new
I don't know why it is adding the #!
I'm using batman.js 0.9 with rails 3.1
Any help figuring this out is be appreciated, thanks.

Here's a good description of hash bang urls hash bang urls. This is normal for batman to do this (pretty much all javascript frameworks do this). You can enable "pushstate:true" which will disable it (however it will fall back to hash bang if you're on a legacy browser).
Regarding your batman.js view not being rendered, I ran into a similar issue. I didn't have an error in my chrome console, however the view wasn't being rendered. You need to make sure you have a data-yield attribute for your view to attach to.
For example:
<div id="container" data-yield="main">
</div>
Excerpt from batman.js github:
Now when you navigate to /#!/faq/what-is-art, the dispatcher runs this
faq action with {questionID: "what-is-art"}. It also makes an implicit
call to #render, which by default will look for a view at
/views/app/faq.html. The view is rendered within the main content
container of the page, which is designated by setting
data-yield="main" on some tag in the layout's HTML. You can prevent
this implicit rendering by calling #render false in your action.
Are you trying to show a link to the show action for the thing? It should look like this if you are:
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing]" data-bind="thing.id"></a>
</li>
</ul>
Here's an example of some code I'm using (the order of the data- attributes doesn't matter):
<div data-foreach-section="sections" data-mixin="animation">
<a data-bind="section.SectionId" data-route="routes.sections[section]"></a>
<p data-bind="section.Name"></p>
</div>

Cannot a Back button to nested list (Latest Version)

I'm having problems trying to get the back button to show in a nexted list. I can see that the same is happening to your demo's here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
You can see the problem here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html&ui-page=Animals-8
or just click any list.
Here is my actually issue:
<ul data-role="listview" data-inset="true">';
<li data-icon="info">
<h3 class="ui-li-heading">Heading here</h3>
<p class="ui-li-desc">Author: <strong>some author</strong></p>
<p class="ui-li-desc">Description: <strong>some description</strong></p>
<ul data-role="listview" data-inset="true" data-add-back-btn="true">
<li>sometthing here</li>
</ul>
</li>
</ul>
Is this a bug or I'm I forgetting something?
Thanks
UPDATE: Another example:
<ul data-role='listview'>
<li>
<li><div>Some Text</div><p>ddd</p>
<ul data-role='listview'>
<li>
some text here
</li>
</ul>
</li>
</li>
</ul>
No back button. How do I make the back button appear?

To reenable the back button simply add data-add-back-btn="true" to the page container:
Related: JQuery Mobile Latest 03 June 2011 Version - No back button
You are using the tests and not the demo, so I guess this would be the latest (or close to) build.
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/index.html
UPDATE:
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Adding Back buttons
jQuery Mobile has a feature to automatically
create and append "back" buttons to any header, though it is disabled
by default. This is primarily useful in chromeless installed
applications, such as those running in a native app web view. The
framework automatically generates a "back" button on a header when the
page plugin's addBackBtn option is true. This can also be set via
markup if the page div has a data-add-back-btn="true" attribute.
If you use the attribute data-rel="back" on an anchor, any clicks on
that anchor will mimic the back button, going back one history entry
and ignoring the anchor's default href. This is particularly useful
when linking back to a named page, such as a link that says "home", or
when generating "back" buttons with JavaScript, such as a button to
close a dialog. When using this feature in your source markup, be sure
to provide a meaningful href that actually points to the URL of the
referring page (this will allow the feature to work for users in
C-Grade browsers. Also, please keep in mind that if you just want a
reverse transition without actually going back in history, you should
use the data-direction="reverse" attribute instead.
Maybe try:
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = true;
});