Hi @phillipskevin, i found the issue
I’m inserting my compoennt multiple times
please see this example: http://jsfiddle.net/ryv0armq/2/
should I move my init to inserted event how do you think?
do you have more than 1 tab component on the page?
like you do in your example
@abalmush
yes, mobile version and desktop version
is houdl use two becouse of the old layout. I should just redesign the navigation and do some javascript refactoring
I can’t change global layout
both are shown though? or one is inside an
{{#if}} ?
yes both are shown
i can add some checks to hide one on mobile and desktop respectively
so are you just hiding it with css visibility?
yep
I’m using media queries for that
ok, if you do
display: none it shouldn’t initialize the second one
also, if you change
cached to not create a new Map, it looks like it fixes the issue
still trying to figure out why
ok let me check this, thank you so much Kevin!
thats interesting new can.Map broke it, removed it and it works in the project too ))
yeah, for some reason that causes both navigation elements to share that same map
if you look at that
cached._cid, both are .map5
can you open an issue for this?
it might not actually be an issue, but someone can take a look and confirm
I think that’s probably actually the intended behavior… because you’re extending the constructor to always have that new
can.Map as the cached property
same as if you did
var cachedMap = new can.Map({
item: {}
});
can.Component.extend({
tag: "navigation",
viewModel: {
cached: cachedMap
}
});
so it might not be worth opening an issue
@phillipskevin @abalmush this is the intended behavior. If you want a unique map for each instance of the component use the define plugin and http://canjs.com/docs/can.Map.prototype.define.value.html
can.Component.extend({
tag: "navigation",
viewModel: {
define: {
cached: {
value: function() {
return {}
}
}
}
}
});
thanks @ccummings for confirming
Thank you @phillipskevin, @ccummings, thats good stuff. I will use define plugin and see what happens.