bundle
bundle
System.import("site/login").then(function(){
$("#main").login();
});System.import(‘component’)…?
"main": "app",
"scripts": {
"build": "steal-tools",
"start": "http-server -p 8091"
},
"system": {
"main": "",
"directories": {
"lib": "src"
},
"npmIgnore": [
"devDependencies"
],
"system": {
"bundle": [
"player-bio/components/player-bio"
],
"meta": {
"player-bio/components/player-bio": {
"sideBundle" : true
}
}
},
"envs": {
"build-development": {},
"window-development": {},
"window-production": {}
}
}, "dependencies": {
"jquery": "^2.2.4",
"jspath": "^0.3.3",
"can-component": "^3.0.0-pre.14",
"can-connect": "^0.5.5",
"can-define": "^0.7.15",
"can-list": "^3.0.0-pre.6",
"can-map": "^3.0.0-pre.8",
"can-route": "^3.0.0-pre.13",
"can-set": "^0.5.6",
"can-stache": "^3.0.0-pre.13",
"can-view-model": "^3.0.0-pre.4",
"steal": "^0.16.33",
"steal-stache": "^3.0.0-pre.3"
},
"devDependencies": {
"can-fixture": "^0.4.0-pre.9",
"jasmine-core": "^2.3.4",
"jasmine-expect": "^1.22.3",
"jasmine-jquery": "^2.1.1",
"karma": "^0.13.11",
"karma-chrome-launcher": "^0.2.0",
"karma-coverage": "^0.5.2",
"karma-jasmine": "^0.3.6",
"karma-jasmine-matchers": "^0.1.3",
"karma-junit-reporter": "^0.3.7",
"karma-junit-sonarqube-reporter": "0.0.1",
"karma-phantomjs-launcher": "^0.2.1",
"phantomjs": "^1.9.18",
"steal-tools": "^0.16.6"
}var stealTools = require('steal-tools');
// prod 1
stealTools.build({
main: 'src/app',
config: __dirname + '/package.json!npm',
jsonOptions: {
transform: function (load, data) {
if (data.system) {
if (data.system.npmIgnore) {
delete data.system.npmIgnore;
}
if (data.system.npmAlgorithm) {
delete data.system.npmAlgorithm;
}
if (data.system.configDependencies && data.system.configDependencies.indexOf('live-reload') > -1) {
data.system.configDependencies.splice(data.system.configDependencies.indexOf('live-reload'), 1);
}
}
return data;
}
}
}, {
bundleSteal: false,
minify: true
});"build": "node build",
pre version
"steal-tools": "1.0.0-beta.3”
{
"name": "steal-tools",
"description": "Futuristic build tools for ES6 Module applications.",
"version": "1.0.0-beta.3",
"author": {
"name": "Bitovi",
"email": "contact@bitovi.com",
"url": "http://bitovi.com/"
},{
"name": "steal",
"description": "Gets JavaScript.",
"version": "1.0.0-beta.3",
"author": {
"name": "Bitovi",
"email": "contact@bitovi.com",
"url": "http://bitovi.com/"
}, $('#main').append(stache('<pgat-player-bio></pgat-player-bio>'));import stache from 'can-stache';
System.import('dist/bundles/src/player-bio/components/player-bio').then(function (){
let template = stache('<pgat-player-bio></pgat-player-bio>');
$('#main').append(template({}));
});dist/bundles/src/player-bio/components/player-bio
System.import('APPNAME/player-bio/components/player-bio')
import Component from 'can-component';
import DefineMap from 'can-define/map/map';
import $ from 'jquery';
import template from './player-bio.stache!';
import PlayerList 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('./player-bio.less');
require('./player-bio-ad');
require('can-view-model');
var PlayerViewModel = DefineMap.extend({
name: {
type: 'string',
value: 'Select Player'
},
personalInfo: {
value: Object,
Type: PlayerBio
},
personalResults: {
value: Object,
Type: PlayerResults
},
personalStats: {
value: Object,
Type: PlayerStats
},
personalStat186: {
value: Object,
Type: PlayerStat186
},
playerList: {
value: Array,
Type: PlayerList
},
showMetric: {
type: 'boolean',
value: false
}
});
Component.extend({
tag: 'pgat-player-bio',
template,
ViewModel: PlayerViewModel,
events: {
inserted: function () {
PlayerList.get({ id: 'id' }).then($.proxy((data)=>{
this.onPlayersData(data);
}, this));
},
'.switcher click': function () {
this.viewModel.showMetric = !this.viewModel.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.name = playerBio.name;
this.viewModel.personalInfo = playerBio;
},
onPlayerResultsData: function (playerResults) {
this.viewModel.personalResults = playerResults;
},
onPlayersData: function (playerList) {
this.players = {};
playerList.forEach((player)=>{
this.players[player.playerId] = player;
});
this.viewModel.playerList = playerList;
},
onPlayerStat186Data: function (playerStat186) {
this.viewModel.personalStat186 = playerStat186;
},
onPlayerStatsData: function (playerStats) {
this.viewModel.personalStats = playerStats;
}
}
});the template is:
```
<div class="player-bio">
<div class="player-image">
{{#personalInfo.playerId}}
<img src="http://i.pgatour.com/image/upload/t_headshot_244x324/headshots_{{personalInfo.playerId}}.png" />
{{/personalInfo.playerId}}
</div>
<div class="box-central">
<div class="box-top">
<span class="player-name">{{name}}</span>
<span class="dropdown-icon glyphicon glyphicon-menu-down"></span>
<div class="dropdown hidden">
<div class="dropdown-content hidden">
<ul>
{{#playerList}}
<li>
<div class="player-select" data-id="{{playerId}}">{{playerName}}</div>
</li>
{{/playerList}}
</ul>
</div>
</div>
<div>
{{#personalInfo.countryCode}}
<span class="flag flag-24x24 {{personalInfo.countryCode}}"></span>
{{else}}
<span class="flag flag-24x24 UNKNOWN"></span>
{{/personalInfo.countryCode}}
</div>
<span class="social-icon glyphicon glyphicon-new-window"></span>
</div>
<div class="box-left">
<div class="box-left-upper">
<div class="sponsor">
sponsor
</div>
<span class="metric-toggle">
{{#showMetric}}
<span class="on">
METRIC ON
<b class="switcher"></b>
</span>
{{else}}
<span class="off">
METRIC OFF
<b class="switcher"></b>
</span>
{{/showMetric}}
</span>
</div>
<div class="box-left-lower">
<div class="row-1">
{{#personalInfo.height}}
<div class="height">
{{#showMetric}}
<div class="height-data">{{personalInfo.heightMetric}}</div>
{{else}}
<div class="height-data">{{personalInfo.height}}</div>
{{/showMetric}}
<div class="height-title">height</div>
</div>
{{/personalInfo.height}}
{{#personalInfo.age}}
<div class="age">
<div class="age-data">{{personalInfo.age}}</div>
<div class="age-title">age</div>
</div>
{{/personalInfo.age}}
{{#personalInfo.school}}
<div class="school">
<div class="school-data">{{personalInfo.school}}</div>
<div class="school-title">college</div>
</div>
{{/personalInfo.school}}
{{#personalInfo.weight}}
<div class="weight">
{{#showMetric}}
<div class="weight-data">{{personalInfo.weightMetric}}</div>
{{else}}
<div class="weight-data">{{personalInfo.weight}}</div>
{{/showMetric}}
<div class="weight-title">weight</div>
</div>
{{/personalInfo.weight}}
{{#personalInfo.turnedPro}}
<div class="turned-pro">
<div class="turned-pro-data">{{personalInfo.turnedPro}}</div>
<div class="turned-pro-title">turned pro</div>
</div>
{{/personalInfo.turnedPro}}
- i would ckeck if the
insertevent is called on the component
- check any errors in console.log
var PlayerViewModel = DefineMap.extend({
steal.js:140 Potentially unhandled rejection [1] TypeError: connection.addInstanceReference is not a function