These are chat archives for canjs/canjs

5th
Nov 2015
Andrei Balmus
@abalmush
Nov 05 2015 13:07

Hi gents,
Is it true that can-click coping current context? If change the property inside the callback, it will not be changed in global Map.
Let me show you an example:

{{#structure.items}}
    <a href="{{url}}" class="{{isSelected}}active{{/isSelected}}" can-click="setIsSelected">
        {{title}}
    </a>
{{/structure.items}}
----------------------------------------------
can.Component.extend({
    ...

    viewModel: {
        cached: new can.Map({item:{}}),
        init: function() {
            this.attr("structure", new can.Map({
                items: [
                    {id: 1, url: "/url1", title: "title1"},
                    {id: 2, url: "/url2", title: "title2"},
                    {id: 3, url: "/url3", title: "title3"}
                ]
            }));

            this.attr("structure.items.0.isSelected", true);
            this.attr("cached.item", "structure.items.0");
        },

        setIsSelected: function(context) {
            // removes active classs from the cached item !! this not removes active class 
            // from the first item which I set to true inside init method: this.attr("structure.items.0.isSelected", true);
            this.attr("cached.item.isSelected", false); 

            // activate current item
            context.attr("isSelected", true); 

            // cache current context
            this.attr("cached.item", context);
        }
    }
});

so the problem is that the first menu item is always active

I want the first item to be active by default
Mihai Fantana
@fantanamihai
Nov 05 2015 14:51

hi everyone. using can/map/define, what is the best way to have a common serialize method for more than 1 attribute?

define: {
   attr1: {
       serialize: fn1()
   },
  attr2: {
      serialize: anotherFn2()
  },
  attr3: {
     serialize: fn1()
  }
...
}

I know in can/map/attributes I had convert. But now? The only way is to declare a method at Map/Model level? e.g.

   can.Model('Test',{},{
      fn1: function(value) {...}
   }
Matthew Phillips
@matthewp
Nov 05 2015 14:54
I think the way you show it there is sensible
there's also a special "*" attr
that applies to every property
"*": { serialize: fn1() }
maybe that's what you want
Mihai Fantana
@fantanamihai
Nov 05 2015 14:56
@abalmush can you be a little more specific? What do you mean by first menu item vs. first item being active?
@matthewp Yeah I know of that one. I didn't want to use it, because I have a few more attributes. There are different groups of attributes sharing different serializers i.e.
attr1, attr3 - fn1;
attr2, attr4, attr5 - antotherFn2 etc...
@matthewp anyway thanks for stopping by
Matthew Phillips
@matthewp
Nov 05 2015 15:03
In that case using a common function is the way to go
Mihai Fantana
@fantanamihai
Nov 05 2015 15:06
cool. that I was thinking. the only objection I had is convert was more like a blackbox for the other Map/Model methods and, by this, it stated clearer what it was for
Mihai Fantana
@fantanamihai
Nov 05 2015 15:16
aha! although undocumented, I see there is a can.define.types, similar to convert, but global
Kevin Phillips
@phillipskevin
Nov 05 2015 15:21
@abalmush are you missing a # in <a href="{{url}}" class="{{isSelected}}active{{/isSelected}}" can-click="setIsSelected”>?
I think it should be <a href="{{url}}" class=“{{#isSelected}}active{{/isSelected}}" can-click="setIsSelected”>
not sure if that’s related to your issue or not
Matthew Phillips
@matthewp
Nov 05 2015 15:21
@meconcomputer I wouldn't use it if it's undocumented. Create an issue to get it documented first.
although I highly doubt that will be broken
Andrei Balmus
@abalmush
Nov 05 2015 17:14
@phillipskevin, Hi no thats not related i wrote this code inside that chat. I’ll make a jsfiddle and send you a link soon
Kevin Phillips
@phillipskevin
Nov 05 2015 17:15
ok, I figured that was just a typo in the chat but wanted to make sure
a fiddle / jsbin would be great to help understand
Andrei Balmus
@abalmush
Nov 05 2015 17:17
yep. few mins and i’ll send the link. thanks
Andrei Balmus
@abalmush
Nov 05 2015 17:44
so it’s not reproducsing in jsfiddle http://jsfiddle.net/ryv0armq/1/ it works well…. strange
looks like i have some additional scripts in my project that broke my navigation.
in my project first menu item is always active
Kevin Phillips
@phillipskevin
Nov 05 2015 17:52
does the selected item change and change back? or just never change?
Andrei Balmus
@abalmush
Nov 05 2015 17:56
let me check this, I think it’s never chane
it only change if I call this.attr("structure.items.0.isSelected", false);
Andrei Balmus
@abalmush
Nov 05 2015 18:05
menu-issue.gif
here is the animated screenshot, it’s not changing )) the component is absolutely the same as jsfiddle code
i think it’s some stupid issue I’ll try to find out what is going on
Kevin Phillips
@phillipskevin
Nov 05 2015 18:15
You could try putting something like this in your init to see how the actual Map is changing:
this.attr('structure.items').each(function(item, i) {
    item.bind('isSelected', function(item, newVal) {
        console.log('item[' + i + '] isSelected: ' + newVal);
    });
});
Andrei Balmus
@abalmush
Nov 05 2015 18:15
ok Let me check, thank you so much for your help!
Kevin Phillips
@phillipskevin
Nov 05 2015 18:17
you can also take a look at how the bit-tabs component does this same thing: https://github.com/bitovi-components/bit-tabs/blob/master/src/unstyled.js#L61
Andrei Balmus
@abalmush
Nov 05 2015 18:17
my click on second item just like on the animated screenshot show in console:
item[0] isSelected: false
item[1] isSelected: true
Kevin Phillips
@phillipskevin
Nov 05 2015 18:18
it’s very similar, but iterates over all the items to deselect the “cached.item"
hmm, so your Map is correct, but the DOM doesn’t get updated?
Andrei Balmus
@abalmush
Nov 05 2015 18:18
yep )) strange isn’t it
Kevin Phillips
@phillipskevin
Nov 05 2015 18:20
yeah, maybe add the isSelected value to your template
so it shows like “Shop: false” or something
so you can confirm it
Andrei Balmus
@abalmush
Nov 05 2015 18:20
yep ok
Andrei Balmus
@abalmush
Nov 05 2015 18:31
menu-issue-test1.gif
here is another test
Kevin Phillips
@phillipskevin
Nov 05 2015 18:32
so item[0] does stay selected
Andrei Balmus
@abalmush
Nov 05 2015 18:33
yes
I think I will fix it if I remove everithing and make it from scratche, same way I did in jsfiddle :D
Kevin Phillips
@phillipskevin
Nov 05 2015 18:34
yeah, maybe
you could try changing
this.attr("structure.items.0.isSelected", true); this.attr("cached.item", this.attr("structure.items.0")); to use your setIsSelected function
see if that fixes it
Andrei Balmus
@abalmush
Nov 05 2015 18:34
ok
Kevin Phillips
@phillipskevin
Nov 05 2015 18:34
or change this.attr("cached.item.isSelected", false); to loop over all the items like it does in bit-tabs
Andrei Balmus
@abalmush
Nov 05 2015 18:35
yea that shoudl work
Kevin Phillips
@phillipskevin
Nov 05 2015 18:35
if you don’t want to rewrite it all together