Skip to content

Instantly share code, notes, and snippets.

@jakewhiteley
Last active August 29, 2015 14:22
Show Gist options
  • Save jakewhiteley/b808877bc7784c643eaf to your computer and use it in GitHub Desktop.
Save jakewhiteley/b808877bc7784c643eaf to your computer and use it in GitHub Desktop.
jsblocks observable each() view issue
App.View('Navigation', {
options: {
url: AppPath + 'views/navigation.html',
},
// the current path as an array of URL parts
currentPath: blocks.observable(['Home'])
});
App.View('Tags', {
options: {
url: AppPath + 'views/tag.html',
route: AppPath +'tag/{{tag}}'
},
// fires when route is called
routed: function (params) {
App.Navigation.currentPath.removeAll() // removes all items if I log App.Navigation.currentPath
App.Navigation.currentPath.addMany(['tag', params.tag]) // seemd to add just the one new value
}
});
// now the Tags.html
// With each route change, the new li elements are added, but the old ones arent removed.
// If I mouseover the ul, then the li are removed from the DOM one by one until only the correct output remains.
<section data-query="view(Navigation)">
<ul id="breadcrumb" data-query="each(currentPath)">
// I spotted another debug error
// this line throws out render(false) - object specified where boolean expected <li data-query="if($view.currentPath.length - 1 == $index, render(false))" data-id="28">
// as well as the if($view.currentPath.length - 1 == $index, ?, ?) - less arguments than the required specified bug you already know about
<li data-query="if($index == 0, render(false))"> / </li>
// this renders fine and prints out tag, value
<li>{{$view.currentPath}}</li>
// prints 2, but prints 0 after pushstate to a tag/different param route
<li>{{$parent.currentPath().length}}</li>
// because the above prints out the correct length, I expect the following to work as well
// throws 'Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.' after pushstate
// I presume this is related to .currentPath().length now being 0?
<li data-query="if($parent.currentPath().length -1 == $index, render(false))">{{$this}}</li>
// when this present without the two data-quries above, it causes the duplication behaviour
<li>{{$this}}</li>
</ul>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment