canjs/canjs

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

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

dylanrtt

@dylanrtt

what does %root have to do with your latest example?

Thomas Sieverding

@Bajix

leakScope affects %root, and I had though that * was intended to manipulate root

W/ what I’m working on, I have a top level container component, and I was trying to export it’s vm as *ui, then wrap a partial in a service component, and access *ui within that partial

dylanrtt

@dylanrtt

I believe %root was added initially for ssr. *ref bindings were added so you could easily share values between components without setting up an initial parent value to which those components would bind

Thomas Sieverding

@Bajix

Yea, so it’s really in there for sibling interactions

dylanrtt

@dylanrtt

exactly

Thomas Sieverding

@Bajix

My misconception was thinking that it was a shortcut to the parent most can.view.Scope

It’s not partial friendly for that reason

dylanrtt

@dylanrtt

sibling interactions where siblings is defined as anything in the template

if you replace the partial with a component, you could pass the *app into it

Thomas Sieverding

@Bajix

Well, not sure that would work in my case

<chat-service {_id}="{_id}" {^is-loading}="./isLoading" {^is-enabled}="./isEnabled" {(is-expanded)}="./isExpanded" {is-focused}="./isFocused" {(is-opened)}="./isOpened" {isMobile}="./isMobile">
  {{>chat/views/core}}
</chat-service>

There we go

Where communities thrive

People

Repo info

Activity