Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 21 21:15
    greenkeeper[bot] commented #5237
  • Sep 21 21:15

    greenkeeper[bot] on @feathersjs

    chore(package): update @feather… (compare)

  • Sep 21 21:12
    greenkeeper[bot] commented #5236
  • Sep 21 21:12

    greenkeeper[bot] on @feathersjs

    chore(package): update @feather… (compare)

  • Sep 21 03:58

    greenkeeper[bot] on @octokit

    (compare)

  • Sep 21 03:57

    greenkeeper[bot] on @octokit

    chore(package): update @octokit… (compare)

  • Sep 20 21:04
    m-mujica commented #5303
  • Sep 20 20:23
    m-mujica opened #5303
  • Sep 20 20:23

    m-mujica on upgrade-deps

    Update can-type and can-stache-… (compare)

  • Sep 20 20:05
    m-mujica edited #5302
  • Sep 20 20:03
    m-mujica synchronize #5302
  • Sep 20 20:03

    m-mujica on upgrade

    Upgrade routing guide to Can 6 Fix incorrect highlight Use svg images (instead of .png) (compare)

  • Sep 20 19:32
    m-mujica opened #5302
  • Sep 20 19:29

    m-mujica on upgrade

    Upgrade routing guide to Can 6 Fix incorrect highlight (compare)

  • Sep 20 17:42

    m-mujica on upgrade

    WIP: Upgrade (compare)

  • Sep 20 17:06
    do-adams starred canjs/canjs
  • Sep 20 13:34

    chasenlehara on 5119-testing-guide

    Update the Testing guide for Ca… (compare)

  • Sep 20 13:21
    cherifGsoul commented #5295
  • Sep 20 13:18
    cherifGsoul synchronize #5295
  • Sep 20 13:18

    cherifGsoul on update-theme-new-buttons

    Theme pre-release 2 (compare)

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
oh
because .attr no longer exists
so basically when you use DefineMap you need to pass it into the ViewModel field not the viewModel field on the component definition
no idea why
and when I wa susing map I had to create an instance of the view model manually
like
Christopher Oliphant
@RALifeCoach
I am using DefineMap and I am passing it to ViewModel. And experiencing a whole new exception being thrown
Leath Cooper
@IcculusC
viewModel: new ViewModelMap()
because you're using attr
attr doesn't exist with DefineMa
p
Christopher Oliphant
@RALifeCoach
Most of the references to attr are not being used. The key line is this.viewModel.playerList = playerList
Leath Cooper
@IcculusC
does the view model exist when you use ViewModel rather than viewModel
if you log it out
Christopher Oliphant
@RALifeCoach
It crashes loading the component - so I can’t tell
Leath Cooper
@IcculusC
:(
Christopher Oliphant
@RALifeCoach
I will instantiate it outside the component and see what I get
Leath Cooper
@IcculusC
wish I could help more but I'm not knee deep in the code like you haha
Christopher Oliphant
@RALifeCoach
okay - you have helped some
thanks for your time
Leath Cooper
@IcculusC
any time
I'm here trying to learn 3.0 too
Christopher Oliphant
@RALifeCoach
It’s working!!
Leath Cooper
@IcculusC
lol what did you do
Christopher Oliphant
@RALifeCoach
I found an error in one of my sub-maps
Leath Cooper
@IcculusC
ah
Christopher Oliphant
@RALifeCoach
that and changing viewModel to ViewModel seems to have done the trick
Leath Cooper
@IcculusC
yeah that viewModel and ViewModel thing is confusing, there's an issue open to add a warning if you use the wrong one so hopefully that will get implemented
Leath Cooper
@IcculusC
can you try something for me
seeing the same error in two environments
Christopher Oliphant
@RALifeCoach
sure, how can I help?
Leath Cooper
@IcculusC
hmm
one sec
nevermind not sure how to do this efficiently lol
Christopher Oliphant
@RALifeCoach
okay
Leath Cooper
@IcculusC
I'm like 100% sure that this binding syntax is completely broken but nobody else seems to notice lol
so I just built a test project in a completely fresh environment and got the same issue
Christopher Oliphant
@RALifeCoach
I have found that sometimes they are too busy to listen and at other times I get an amazing amount of help
Leath Cooper
@IcculusC
not their fault
but usingthe syntax you're using for events nothing ever gets called, and using the syntax from can-stache-bindings docs it just breaks
Christopher Oliphant
@RALifeCoach
my events get called
Leath Cooper
@IcculusC
oh I'm dumb
so the events part probably works, but the stache binding to viewmodel functions definiteyl doesn't