canjs/canjs

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

Mohamed Cherif Bouchelaghem

@cherifGsoul

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

but that seems to be extremely broken

            <button type="button" class="btn btn-warning btn-large btn-block" ($event)="clicked()">Login</button>

Christopher Oliphant

@RALifeCoach

My approach is probably also broken

Leath Cooper

@IcculusC

are you using a DefineMap

Christopher Oliphant

@RALifeCoach

They both probably use the same underlying, broken, code

I have tried Map and DefineMap

I have more luck with Map

Leath Cooper

@IcculusC

have you tried logging out the value of this.viewModel

and just looking at the structure of it

Christopher Oliphant

@RALifeCoach

I’ll do that now

Leath Cooper

@IcculusC

that's how I traced my bug back to can-stache-bindings

Christopher Oliphant

@RALifeCoach

It is still uninstantiated

Leath Cooper

@IcculusC

try logging "this"

can you link your component code one more time too I can't find it

this laptop is crap

Christopher Oliphant

@RALifeCoach

here is the whole thing:

import Component from 'can-component';
var DefineMap = require('can-define/map/map');
var Map = require('can-map');
import $ from 'jquery';
import stache from 'can-stache';
import template from './player-bio.stache!';
import Players from '../models/players-model';
import PlayerBio from '../models/player-bio-model';
import PlayerResults from '../models/player-results-model';
import PlayerStats from '../models/player-stats-model';
import PlayerStat186 from '../models/player-stat186-model';
require('bootstrap/dist/css/bootstrap.css');
require('./player-bio.less');
require('./player-bio-ad');
require('can-view-model');

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

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);
        },
        '.switcher click': function () {
            this.viewModel.attr('showMetric', !this.viewModel.attr('showMetric'));
        },
        '.dropdown-icon click': function () {
            $('.dropdown').removeClass('hidden');
            $('.dropdown-content').removeClass('hidden');
        },
        '.player-select click': function (element) {
            $('.dropdown').addClass('hidden');
            $('.dropdown-content').addClass('hidden');
            var playerId = $(element).attr('data-id');
            PlayerBio.get({ id: playerId }).then($.proxy((data)=>{
                this.onPlayerBioData(data);
            }, this));
            PlayerResults.get({
                id: playerId,
                year: '2016'
            }).then($.proxy((data)=>{
                this.onPlayerResultsData(data);
            }, this));
            PlayerStats.get({
                id: playerId,
                year: '2016'
            }).then($.proxy((data)=>{
                this.onPlayerStatsData(data);
            }, this));
            PlayerStat186.get({
                id: playerId
            }).then($.proxy((data)=>{
                this.onPlayerStat186Data(data);
            }, this));
        },

        onPlayerBioData: function (playerBio) {
            playerBio.countryCode = this.players[playerBio.playerId].countryCode;
            this.viewModel.attr('name', playerBio.name);
            this.viewModel.attr('personalInfo', playerBio);
        },

        onPlayerResultsData: function (playerResults) {
            this.viewModel.attr('personalResults', playerResults);
        },

        onPlayersData: function (playerList) {
            this.players = {};
            playerList.players.forEach((player)=>{
                this.players[player.playerId] = player;
            });
            this.viewModel.playerList = playerList;
        },

        onPlayerStat186Data: function (playerStat186) {
            this.viewModel.attr('personalStat186', playerStat186);
        },

        onPlayerStatsData: function (playerStats) {
            this.viewModel.attr('personalStats', playerStats);
        }
    }
});

$(document.body).append(stache('<pgat-player-bio></pgat-player-bio>'));

Leath Cooper

@IcculusC

capitalize the v in viewModel on your component definition

like where it says viewModel: PlayerViewModel or whatever

this laptop has a cell phone processor hard to scroll up lol

Christopher Oliphant

@RALifeCoach

now can-map is blowing up with computedAttr.compute is not a function

Leath Cooper

@IcculusC

is it a define map or a map

Christopher Oliphant

@RALifeCoach

DefineMap

Leath Cooper

@IcculusC

Where communities thrive

People

Repo info

Activity