canjs/canjs

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

Christopher Oliphant

@RALifeCoach

How do I insert data into the view model?

Mohamed Cherif Bouchelaghem

@cherifGsoul

via attributes

attributes in the component

Christopher Oliphant

@RALifeCoach

This model is built with objects and objects within objects and it has many, many elements. It wouldn’t make sense to put all those into attributes.

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach https://canjs.com/docs/can.elementAndAttributes.html

https://canjs.com/docs/can.Component.html

Christopher Oliphant

@RALifeCoach

I have read that. What are you trying to tell me?

Mohamed Cherif Bouchelaghem

@cherifGsoul

I want to tell you it makes sens :)
maybe I didnt understand well what are you looking for

Christopher Oliphant

@RALifeCoach

I am to create a stache element with 100+ attributes?

Mohamed Cherif Bouchelaghem

@cherifGsoul

you want to pass all of theme to a component?

Christopher Oliphant

@RALifeCoach

yes

it’s a big piece of code!

Mohamed Cherif Bouchelaghem

@cherifGsoul

those attrs values are loaded from the server I supose?

Christopher Oliphant

@RALifeCoach

You suppose correctly. :-)

Mohamed Cherif Bouchelaghem

@cherifGsoul

In this case you need a can.Model

I hope you have one

Christopher Oliphant

@RALifeCoach

No I do have one. In this case the data is being retrieved by another module all together and being passed to this module. (The original file contains many rows. This module is just one row.)

So can.Model will not help.

I could create the properties as an JSON object and return it via a fixture - but this is now getting very complicated

Mohamed Cherif Bouchelaghem

@cherifGsoul

fixtures for production code?

Christopher Oliphant

@RALifeCoach

exactly - not something I want to do

Therefore I need another suggestion.

I currently instantiate the Map outside of the component and then pass the map into the template when adding the stache template into the page. That way I can update the map data and it is reflected in the html.

Christopher Oliphant

@RALifeCoach

Everything was working until I tried to wire in an event. The event was originally being wired through jQuery bind’s. I could continue to use that, but I wanted to wire the event into the component.

@cherifGsoul any suggestions?

Mohamed Cherif Bouchelaghem

@cherifGsoul

the case is complicated

Kevin Phillips

@phillipskevin

sorry to recap, your problem is that this.viewModel is undefined when you set it up like template(this.playerRowMap) ?

Christopher Oliphant

@RALifeCoach

The viewModel is defined. But the attrs are buried. and I can’t access them via this.viewModel.attr(‘xxx’).

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

Where communities thrive

People

Repo info

Activity