canjs/canjs

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

Mohamed Cherif Bouchelaghem

@cherifGsoul

'#myId highlightplayer': function () {
                debugger;
            },

Christopher Oliphant

@RALifeCoach

okay - I used it without the #myId because the docs say:

events: {
    "click" : function(){
      var currentMessage = this.viewModel.attr("message");
      this.viewModel.attr("message", currentMessage+ "!")
    }
  }

Mohamed Cherif Bouchelaghem

@cherifGsoul

It listens to click event on the component tag

Christopher Oliphant

@RALifeCoach

The id in my case isn’t fixed. It is actually ‘xxx-‘ + pid

Mohamed Cherif Bouchelaghem

@cherifGsoul

use classes

class="js-my-el"

'.js-my-el highlightplayer': function () {
                debugger;
            }

Kevin Phillips

@phillipskevin

you can put the event in your template also

Christopher Oliphant

@RALifeCoach

but the component is repeated many times on the page - therefore the class would be repeated

Kevin Phillips

@phillipskevin

($highlightPlayer)=“highlightPlayer”

Christopher Oliphant

@RALifeCoach

I only want the change to apply to this row

that’s why the id is distinct

@phillipskevin isn’t that discouraged due to the performance impact?

Kevin Phillips

@phillipskevin

only if you’re going to have thousands of this component

Christopher Oliphant

@RALifeCoach

If I specify it as you indicated, then I can use the event as shown above?

Kevin Phillips

@phillipskevin

if you do it that way, highlightPlayer would be a function on your viewmodel

Christopher Oliphant

@RALifeCoach

and how do I fire it as an event from outside the component?

Kevin Phillips

@phillipskevin

http://jsbin.com/xukikegepo/edit?html,js,console,output

$.trigger

or can.trigger

Christopher Oliphant

@RALifeCoach

but this doesn’t work http://jsbin.com/himido/1/edit?html,js,console,output

Kevin Phillips

@phillipskevin

no, it doesn't

the ($highlight)=“highlight” has to be on the same element you’re triggering the event on

Christopher Oliphant

@RALifeCoach

right - thanks

Kevin Phillips

@phillipskevin

no problem

Thomas Sieverding

@Bajix

@RALifeCoach How’s the project coming along?

Thomas Sieverding

@Bajix

How do I read/write to the root scope w/in a component

Thomas Sieverding

@Bajix

How does %root work?

dylanrtt

@dylanrtt

@Bajix %root is just a child map of all components' viewmodels, so you can do this.attr('%root.foo') or this.attr('%root.foo', bar)

Thomas Sieverding

@Bajix

How does that relate to https://canjs.com/docs/can.view.bindings.reference.html?

dylanrtt

@dylanrtt

are you asking how to use it in a template?

Thomas Sieverding

@Bajix

yes

My impression was that I’d be able to do <foo *bar> … {{*bar.someProp}} ..</foo>

I’m a little confused though, as I had expected %root.bar to be set as the exported vm

dylanrtt

@dylanrtt

scope lookups to component viewmodels don't fall-through to %root if that's what you are thinking

whereas scope in the template does (not sure if I said that right)

Thomas Sieverding

@Bajix

I see - I had thought %root was the template scope

dylanrtt

@dylanrtt

This message was deleted

Thomas Sieverding

@Bajix

%root is the top most ref?

So if you’re doing leakScope: false, then child components would have %root === the vm of the parent

dylanrtt

@dylanrtt

yes, the top most ref

shouldn't matter with leakScope:whatever

Thomas Sieverding

@Bajix

That’s inconsistent w/ the docs. *bar should be the vm itself

dylanrtt

@dylanrtt

oh sorry my bad, I don't usually use that syntax

Thomas Sieverding

@Bajix

Well, leakScope would just mean that it’s now the top most ref

So if I had <my-app *app><my-service>{{>views/index}}</my-service></my-app>, shouldn’t I be able to do {{*app.foo}} within index?

dylanrtt

@dylanrtt

I don't think so. *app would only be available within the outer template. They are not passed down

Thomas Sieverding

@Bajix

Even if my-service uses leakScope: true?

dylanrtt

@dylanrtt

honestly, I'm not totally sure but I don't think reference scope is inherited in partials. not sure why the component's leakScope would matter

Thomas Sieverding

@Bajix

Hmm. I had been treating it like a shortcut to my root scope, but I guess that’s innaccurate

Where communities thrive

People

Repo info

Activity