canjs/canjs

We CAN build the impossible! https://codepen.io/justinbmeyer/pen/yEGGoK

Christopher Oliphant

@RALifeCoach

when I examine the element I can see that hasMedia has changed

Julian

@pYr0x

try

https://github.com/canjs/canjs/pull/2086/files#diff-1a99d9511d98825a6894148b69d7cd4dR187

better use the define plugin... getter and setter

for making sideeffects

Christopher Oliphant

@RALifeCoach

The first suggestion didn’t work.

    can.Component.extend({
        tag: 'feature-icon',
        template: can.view('/modules/components/feature-icon/feature-icon.stache'),
        viewModel: can.Map.extend({
            hasMedia: false
        }),
        events: {
            '{viewModel} hasMedia': function () {
                debugger;
            }
        }
    });

Julian

@pYr0x

and how do you change hasMedia?

please notice, that the viewModel is an external var

https://github.com/canjs/canjs/pull/2086/files#diff-1a99d9511d98825a6894148b69d7cd4dR91

Christopher Oliphant

@RALifeCoach

It is contained within another component and set by the parent when the data changes.

In debug, when I examine the component, I can see the value in the attribute has changed, but I don’t see the change within the component.

    var Model = can.Map.extend({
        define: {
            hasMedia: {
                type: 'boolean',
                set: function () {
                    debugger;
                }
            }
        }
    });
    can.Component.extend({
        tag: 'feature-icon',
        template: can.view('/modules/components/feature-icon/feature-icon.stache'),
        viewModel: Model
    });

Christopher Oliphant

@RALifeCoach

Still no luck

BTW, I included can/stache/system, but <can-import> didn’t work

Julian

@pYr0x

how do you mean , inclueded can/stache/system?

how do you use canjs?

AMD?

global?

Christopher Oliphant

@RALifeCoach

global

Julian

@pYr0x

and how could you include can/stache/system ?

Christopher Oliphant

@RALifeCoach

so when I built the custom file, I included can/stache/system

Mohamed Cherif Bouchelaghem

@cherifGsoul

I think a dependency manager (steal,requirejs,webpack) is required to use can/stache/system

Julian

@pYr0x

Christopher Oliphant

@RALifeCoach

@cherifGsoul any suggestions on my delema

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach I didnt follow from the bginning

Christopher Oliphant

@RALifeCoach

okay - I have a component:

<feature-icon type="article" types="articles" 
                                  isActive="{{isActive}}" 
                                  hasMedia="{{hasMediaContent('articles')}}" 
                                  profilesURL="options.profilesURL"></feature-icon>

with the component defined as:

    var Model = can.Map.extend({
        define: {
            hasMedia: {
                type: 'boolean',
                set: function () {
                    debugger;
                }
            }
        }
    });
    can.Component.extend({
        tag: 'feature-icon',
        template: can.view('/modules/components/feature-icon/feature-icon.stache'),
        viewModel: Model
    });

The debugger is never called

I know the value in hasMedia is initially set to false and is later set to true

Mohamed Cherif Bouchelaghem

@cherifGsoul

use has-mediaas attribute in the component

Christopher Oliphant

@RALifeCoach

The attribute value never seems to get changed in the viewModel

Mohamed Cherif Bouchelaghem

@cherifGsoul

change it to what I sugget

<feature-icon type="article" types="articles" 
                                  is-active="{{isActive}}" 
                                  has-media="{{hasMediaContent('articles')}}" 
                                  profiles-URL="options.profilesURL"></feature-icon>

Christopher Oliphant

@RALifeCoach

Thanks - that was all it took

Mohamed Cherif Bouchelaghem

@cherifGsoul

works?

Christopher Oliphant

@RALifeCoach

It is better, not sure if all is working yet

Julian

@pYr0x

@cherifGsoul great job :)

Veni vidi vici

:clap:

Mohamed Cherif Bouchelaghem

@cherifGsoul

thank you I dont know if those points exist in the docs

Christopher Oliphant

@RALifeCoach

Yes - it is working now. the attribute is has-media, but when I use it in the stache file it is hasMedia. A bit confusing.

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach it'scanjs recommandation properties camel cased like hasMediaand template attributes hypenated like has-media

dont be confused bro :)

Christopher Oliphant

@RALifeCoach

I am easily confused. (And I am having a lot of fun.)

I just hope I am not being too much of a bother. I really appreciate all the assistance I am getting from folks here.

Matthew Phillips

@matthewp

Every time I come here and see 50+ recent messages i'm terrified but mostly excited :)

CanJS is blowing up!

Mohamed Cherif Bouchelaghem

@cherifGsoul

@matthewp we are the night watch :D

but it's the efternoon here

Matthew Phillips

@matthewp

hehe

Where communities thrive

People

Repo info

Activity