Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 02:45
    AkiaCode starred canjs/canjs
  • Oct 19 14:39
    hkutcher opened #5510
  • Oct 19 14:38
  • Oct 17 10:58
    Fatima-Usf starred canjs/canjs
  • Oct 15 21:18
    naskio starred canjs/canjs
  • Oct 12 22:08
    cherifGsoul synchronize #5509
  • Oct 12 22:08

    cherifGsoul on upgrade-can-ajax

    xvfb services (compare)

  • Oct 12 22:07
    cherifGsoul edited #5509
  • Oct 12 22:06
    cherifGsoul opened #5509
  • Oct 12 22:01

    cherifGsoul on upgrade-can-ajax

    Update can-ajax version (compare)

  • Sep 29 13:17
    ko25july starred canjs/canjs
  • Sep 21 17:41
    cherifGsoul assigned #5508
  • Sep 21 17:39
    cherifGsoul opened #5508
  • Sep 18 19:32
  • Sep 11 02:59
    torongu starred canjs/canjs
  • Sep 09 06:57
    tbreuss starred canjs/canjs
  • Sep 04 18:58
    cherifGsoul review_requested #5507
  • Sep 04 18:58
    cherifGsoul opened #5507
  • Sep 04 18:51

    cherifGsoul on post-release-script

    Add GitHub release automation (compare)

  • Aug 22 17:54
    ThisIsntMyId starred canjs/canjs
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
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