Last active
August 29, 2015 14:22
-
-
Save jakewhiteley/b808877bc7784c643eaf to your computer and use it in GitHub Desktop.
jsblocks observable each() view issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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