canjs/canjs

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

Mohamed Cherif Bouchelaghem

@cherifGsoul

@phillipskevin here is the component

 can.Component.extend({
        tag: 'player-row',
        template: can.view('/modules/components/player-row/player-row.stache'),
        helpers: helpers,
        events: {
            '.add-to-favorite click': function () {
                this.viewModel.callParent('onPinPlayer');
            }
        }

the component viewModel prop is emplty

Kevin Phillips

@phillipskevin

right, I saw that

Mohamed Cherif Bouchelaghem

@cherifGsoul

as I understand he wants to copy other external viewModel properties to component props

Christopher Oliphant

@RALifeCoach

when I break on that statement and watch on this.viewModel it says it is a Constructor. When I open the object I see _data, when I open _data, I see %root, when I open that I see my properties.

Mohamed Cherif Bouchelaghem

@cherifGsoul

so this.viewModel.attr('%root').attr('prop')

Christopher Oliphant

@RALifeCoach

That works.

That isn’t exactly intuitive, but it works. Thank-you.

Kevin Phillips

@phillipskevin

I think it would simplify things a lot if we could figure out a way to pass the viewmodel in the conventional way

Christopher Oliphant

@RALifeCoach

Actually, this is a really nice way of handling things. With the map being instantiated outside of the component lets me update the map as needed and that automatically updates the html. For really large systems and legacy systems, this is a real boon.

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach I know you are converting a legacy app, but things withcanjs can be done in simpler way

Christopher Oliphant

@RALifeCoach

There is a huge difference between writing new code and a slow transition in an existing legacy system. Especially when the legacy system has 100’s of thousands of lines of code. To make the tool really useful, these features become really import in these situations.

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach yes, we are happy we can help you :)

Christopher Oliphant

@RALifeCoach

In fact, to make a few changes to make this simpler could greatly extend the reach of this tool into other companies and environments.

Kevin Phillips

@phillipskevin

please feel free to open issues

Christopher Oliphant

@RALifeCoach

I’m back. I am trying to fire an event. Inside the component I have:

        events: {
            'highlightplayer': function () {
                debugger;
            },

and in the parent module I have:

$(‘#myId’).trigger(‘highlightplayer’);

I also tried:

can.event.dispatch.call($(‘myId’), ‘highlightplayer’);

myId is assigned in the stache fragment for the component

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>

Where communities thrive

People

Repo info

Activity