canjs/canjs

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

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach I hope you are just experiementing with 3.0!!

Christopher Oliphant

@RALifeCoach

Experimenting or not I still need to find the magic syntax.

(As a comment that how working with CanJS feels. You fight with it until you find the magic syntax and then it starts working.)

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach How you write your component?

Christopher Oliphant

@RALifeCoach

Component.extend({
    tag: 'pgat-player-bio',
    template,
    viewModel: PlayerBioViewModel,
    events: {
        inserted: function () {
            Players.get({ id: 'id' }).then($.proxy((data)=>{
                this.onPlayersData(data);
            }, this));
            console.log(this.viewModel.personalStats.scoringAverage;
        },
        onPlayersData: function (playerList) {
            this.players = {};
            playerList.players.forEach((player)=>{
                this.players[player.playerId] = player;
            });
            this.viewModel.attr('playerList', playerList);
        }
    }
});

The viewModel is:

Mohamed Cherif Bouchelaghem

@cherifGsoul

PlayerBioViewModel is with the new can-define?

Christopher Oliphant

@RALifeCoach

var PlayerBioViewModel = DefineMap.extend({
    name: 'Select Player',
    personalInfo: {
        Value: PlayerBio
    },
    personalResults: {
        Value: PlayerResults
    },
    personalStats: {
        Value: PlayerStats
    },
    personalStat186: {
        Value: PlayerStat186
    },
    playerList: {
        players: []
    },
    showMetric: false
});

Two issue, so far, the values are not being initialized and I can’t update the values from the component events

I have tried this.viewModel.attr(‘property…), this.viewModel.set(‘property’…), this.viewModel.property

For item 1 PlayerStat186 is:

Christopher Oliphant

@RALifeCoach

var PlayerStat186 = DefineMap.extend({
    owgRank: {
        value: ''
    }
});

But in the inserted event playerStat186 is undefined

Mohamed Cherif Bouchelaghem

@cherifGsoul

@RALifeCoach what are the dependencies for the viewModel

Christopher Oliphant

@RALifeCoach

do you mean this? var DefineMap = require('can-define/map/map');

Mohamed Cherif Bouchelaghem

@cherifGsoul

yes what else?

Christopher Oliphant

@RALifeCoach

What are you looking for?

I don’t think there is anything else.

Mohamed Cherif Bouchelaghem

@cherifGsoul

I think you need https://github.com/canjs/can-view-model

Christopher Oliphant

@RALifeCoach

do I assign it to anything or just require it?

I added can-view-model. this.viewModel.playerStats is still undefined. When I assign this.viewModel.playerList = playerList; I do not get an error, but nor do I see the data in the stache.

Mohamed Cherif Bouchelaghem

@cherifGsoul

I can not realy help you right now

I need time to try it

Christopher Oliphant

@RALifeCoach

I understand. You have a job that requires your attention.

Mohamed Cherif Bouchelaghem

@cherifGsoul

I learn the 3.0 like you :)

Leath Cooper

@IcculusC

hey @RALifeCoach is your code on github somewhere

Christopher Oliphant

@RALifeCoach

Who actually knows it?

No it isn’t on github. It is on my corporate repo.

Leath Cooper

@IcculusC

I've got a decent handle on how it works, but I'm stuck on a big fat glaring error in the event bindings lol

Christopher Oliphant

@RALifeCoach

If you want I can extract the relavent pieces and add them to github

Leath Cooper

@IcculusC

I don't know if I can really help just yet, I think you're using it in a different way than I am

I was just going to take a look if it was

Christopher Oliphant

@RALifeCoach

It sounds like I am.

Leath Cooper

@IcculusC

let me scroll up one sec

oh yeah

you're using events I'm using binding in the template

but are you sure the the Value: something syntax is correct

Christopher Oliphant

@RALifeCoach

At this stage, I’m not sure of anything

Leath Cooper

@IcculusC

in mine I'm using

thing: {
  value: object,
  Type: SomeClass
}

Christopher Oliphant

@RALifeCoach

here is the excerpt from the docs
Value {function}: Specifies a function that will be called with new whose result is set as the initial value of the attribute.

// A default empty DefineList of hobbies:
var Person = DefineMap.extend({
hobbies: {Value: DefineList}
});

new Person().hobbies //-> []

Leath Cooper

@IcculusC

which initializes a new instance of that class as the value of that field

weird

one sec

let LoginViewModel = DefineMap.extend({
    user: {
        value: Object,
        Type: User
    }
});

Component.extend({
    tag: "login-form",
    template: Login,
    ViewModel: LoginViewModel
});

here's an example of some code that works and properly populates the field on the view model

where the template is stored in a separate stache

Christopher Oliphant

@RALifeCoach

That’s similar to what I have

Leath Cooper

@IcculusC

however I'm not using the events object in the viewmodel obviously

instead when I create a function on the view model I use the ($event) syntax

Where communities thrive

People

Repo info

Activity