canjs/canjs

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

Mohamed Cherif Bouchelaghem

@cherifGsoul

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

Christopher Oliphant

@RALifeCoach

Me again. I am trying to access the view model from an event.

the view model has a function, the events tries:

this.viewModel.vmFunction();

The message is vmFunction is not a function

If I break at that statement and add a watch, this.viewModel.vmFunction returns undefined

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach maybe full code (component, template) can help to have a quick answer

Christopher Oliphant

@RALifeCoach

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');
            }
        }

Map:

    var Map = MapBase.extend({
        define: {
            options: {
                Type: OptionsMap
            },
            pid: {
                type: 'string'
            },
            player: {
                Type: PlayerMap
            },
        },

        callParent: function (method) {
            this.attr(method)();
        },

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach you dont have a viewModel in your component

Christopher Oliphant

@RALifeCoach

Inserted via:

            this.playerRowMap = new Map(data);
            var template = can.stache('<player-row id="player-row-' + this.pid + '"></player-row>');
            this.container.append(template(this.playerRowMap));

the view model is inserted as shown in the last snippet. When I look at the view model in debug, I can see the various properties

Mohamed Cherif Bouchelaghem

@cherifGsoul

I dont think is in the component scope

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

Christopher Oliphant

@RALifeCoach

and there are other functions on the view model that are used by the stache template - and those work

The component is in a separate file from the map and they are in separate files from the main code. I wanted to keep that separation.

which leaves me with the problem of populating the viewModel with data.

Mohamed Cherif Bouchelaghem

@cherifGsoul

Yes you can seperate ViewModelmodule

in your component this.viewModel in the component can have only the base viewModel without your VMmethods

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.

Where communities thrive

People

Repo info

Activity