cherifGsoul on document-inserted-removed-can6
Update after review (compare)
cherifGsoul on theme-3.0.0-pre.5
cherifGsoul on master
Update bit-doc-html-canjs (#544… (compare)
cherifGsoul on theme-3.0.0-pre.5
Update bit-doc-html-canjs Upda… (compare)
cherifGsoul on update-api-page
cherifGsoul on master
Update API page (#5432) * Upda… (compare)
greenkeeper[bot] on core-js-3.5.0
chore(package): update core-js … (compare)
greenkeeper[bot] on can-observable-mixin-1.0.7
fix(package): update can-observ… (compare)
cherifGsoul on update-infrastructure-page
cherifGsoul on master
Update infrastructure page with… (compare)
Value: something
syntax is correct
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 //-> []
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
<button type="button" class="btn btn-warning btn-large btn-block" ($event)="clicked()">Login</button>
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>'));