<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="kendoUI@2014.2.716" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<link data-require="kendoUI@2014.2.716" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
<script data-require="kendoUI@2014.2.716" data-semver="2014.2.716" src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.7.0/jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
/* Styles go here */
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"ignore": ["github:*", "npm:*"],
"stage": 0,
"optional": []
},
paths: {
"github:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.7.0/jspm_packages/github/*",
"npm:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.7.0/jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "github:aurelia/animator-css@0.17.0",
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-bootstrapper": "github:aurelia/bootstrapper@0.18.0",
"aurelia-breeze": "github:jdanyow/aurelia-breeze@0.11.3",
"aurelia-computed": "github:jdanyow/aurelia-computed@0.7.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-dialog": "github:aurelia/dialog@0.4.1",
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.9.0",
"aurelia-fetch-client": "github:aurelia/fetch-client@0.3.0",
"aurelia-framework": "github:aurelia/framework@0.17.0",
"aurelia-history": "github:aurelia/history@0.8.0",
"aurelia-history-browser": "github:aurelia/history-browser@0.9.0",
"aurelia-http-client": "github:aurelia/http-client@0.12.0",
"aurelia-loader": "github:aurelia/loader@0.10.0",
"aurelia-loader-default": "github:aurelia/loader-default@0.11.2",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"aurelia-route-recognizer": "github:aurelia/route-recognizer@0.8.0",
"aurelia-router": "github:aurelia/router@0.13.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.16.0",
"aurelia-templating-binding": "github:aurelia/templating-binding@0.16.1",
"aurelia-templating-resources": "github:aurelia/templating-resources@0.16.1",
"aurelia-templating-router": "github:aurelia/templating-router@0.17.0",
"aurelia-validation": "github:aurelia/validation@0.4.0",
"babel": "npm:babel-core@5.8.25",
"babel-runtime": "npm:babel-runtime@5.8.25",
"breeze": "npm:breeze-client@1.5.5",
"clean-css": "npm:clean-css@3.4.6",
"core-js": "npm:core-js@0.9.18",
"css": "github:systemjs/plugin-css@0.1.19",
"fetch": "github:github/fetch@0.9.0",
"github:aurelia/animator-css@0.17.0": {
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-templating": "github:aurelia/templating@0.16.0"
},
"github:aurelia/binding@0.10.2": {
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.8.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/bootstrapper@0.18.0": {
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.9.0",
"aurelia-framework": "github:aurelia/framework@0.17.0",
"aurelia-history": "github:aurelia/history@0.8.0",
"aurelia-history-browser": "github:aurelia/history-browser@0.9.0",
"aurelia-loader-default": "github:aurelia/loader-default@0.11.2",
"aurelia-logging-console": "github:aurelia/logging-console@0.8.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-pal-browser": "github:aurelia/pal-browser@0.2.0",
"aurelia-router": "github:aurelia/router@0.13.0",
"aurelia-templating": "github:aurelia/templating@0.16.0",
"aurelia-templating-binding": "github:aurelia/templating-binding@0.16.1",
"aurelia-templating-resources": "github:aurelia/templating-resources@0.16.1",
"aurelia-templating-router": "github:aurelia/templating-router@0.17.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/dependency-injection@0.11.2": {
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/dialog@0.4.1": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-framework": "github:aurelia/framework@0.17.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-templating": "github:aurelia/templating@0.16.0",
"text": "github:systemjs/plugin-text@0.0.2"
},
"github:aurelia/event-aggregator@0.9.0": {
"aurelia-logging": "github:aurelia/logging@0.8.0"
},
"github:aurelia/fetch-client@0.3.0": {
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/framework@0.17.0": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-loader": "github:aurelia/loader@0.10.0",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.16.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/history-browser@0.9.0": {
"aurelia-history": "github:aurelia/history@0.8.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/http-client@0.12.0": {
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/loader-default@0.11.2": {
"aurelia-loader": "github:aurelia/loader@0.10.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0"
},
"github:aurelia/loader@0.10.0": {
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-path": "github:aurelia/path@0.10.0"
},
"github:aurelia/logging-console@0.8.0": {
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-pal": "github:aurelia/pal@0.2.0"
},
"github:aurelia/metadata@0.9.0": {
"aurelia-pal": "github:aurelia/pal@0.2.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/pal-browser@0.2.0": {
"aurelia-pal": "github:aurelia/pal@0.2.0"
},
"github:aurelia/route-recognizer@0.8.0": {
"aurelia-path": "github:aurelia/path@0.10.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/router@0.13.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.9.0",
"aurelia-history": "github:aurelia/history@0.8.0",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"aurelia-route-recognizer": "github:aurelia/route-recognizer@0.8.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/task-queue@0.8.0": {
"aurelia-pal": "github:aurelia/pal@0.2.0"
},
"github:aurelia/templating-binding@0.16.1": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.16.0"
},
"github:aurelia/templating-resources@0.16.1": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-loader": "github:aurelia/loader@0.10.0",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.16.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/templating-router@0.17.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"aurelia-router": "github:aurelia/router@0.13.0",
"aurelia-templating": "github:aurelia/templating@0.16.0"
},
"github:aurelia/templating@0.16.0": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-loader": "github:aurelia/loader@0.10.0",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-path": "github:aurelia/path@0.10.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.8.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/validation@0.4.0": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.11.2",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"aurelia-metadata": "github:aurelia/metadata@0.9.0",
"aurelia-templating": "github:aurelia/templating@0.16.0"
},
"github:jdanyow/aurelia-breeze@0.11.3": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-http-client": "github:aurelia/http-client@0.12.0",
"aurelia-pal": "github:aurelia/pal@0.2.0",
"aurelia-pal-browser": "github:aurelia/pal-browser@0.2.0",
"aurelia-templating": "github:aurelia/templating@0.16.0",
"breeze": "npm:breeze-client@1.5.5"
},
"github:jdanyow/aurelia-computed@0.7.0": {
"aurelia-binding": "github:aurelia/binding@0.10.2",
"aurelia-logging": "github:aurelia/logging@0.8.0",
"core-js": "npm:core-js@0.9.18"
},
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.5.1"
},
"github:jspm/nodelibs-events@0.1.1": {
"events": "npm:events@1.0.2"
},
"github:jspm/nodelibs-http@1.7.1": {
"Base64": "npm:Base64@0.2.1",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"github:jspm/nodelibs-https@0.1.0": {
"https-browserify": "npm:https-browserify@0.0.0"
},
"github:jspm/nodelibs-os@0.1.0": {
"os-browserify": "npm:os-browserify@0.1.2"
},
"github:jspm/nodelibs-path@0.1.0": {
"path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.2": {
"process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-stream@0.1.0": {
"stream-browserify": "npm:stream-browserify@1.0.0"
},
"github:jspm/nodelibs-url@0.1.0": {
"url": "npm:url@0.10.3"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"npm:amdefine@1.0.0": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"module": "github:jspm/nodelibs-module@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:babel-runtime@5.8.25": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:buffer@3.5.1": {
"base64-js": "npm:base64-js@0.0.8",
"ieee754": "npm:ieee754@1.1.6",
"is-array": "npm:is-array@1.0.1"
},
"npm:clean-css@3.4.6": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"commander": "npm:commander@2.8.1",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"http": "github:jspm/nodelibs-http@1.7.1",
"https": "github:jspm/nodelibs-https@0.1.0",
"os": "github:jspm/nodelibs-os@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"source-map": "npm:source-map@0.4.4",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:commander@2.8.1": {
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"events": "github:jspm/nodelibs-events@0.1.1",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"graceful-readlink": "npm:graceful-readlink@1.0.1",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:core-js@0.9.18": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:graceful-readlink@1.0.1": {
"fs": "github:jspm/nodelibs-fs@0.1.2"
},
"npm:https-browserify@0.0.0": {
"http": "github:jspm/nodelibs-http@1.7.1"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:os-browserify@0.1.2": {
"os": "github:jspm/nodelibs-os@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:punycode@1.3.2": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:readable-stream@1.1.13": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.1",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.2",
"stream-browserify": "npm:stream-browserify@1.0.0",
"string_decoder": "npm:string_decoder@0.10.31"
},
"npm:source-map@0.4.4": {
"amdefine": "npm:amdefine@1.0.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:stream-browserify@1.0.0": {
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"readable-stream": "npm:readable-stream@1.1.13"
},
"npm:string_decoder@0.10.31": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:url@0.10.3": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"punycode": "npm:punycode@1.3.2",
"querystring": "npm:querystring@0.2.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
});
import {Router} from 'aurelia-router';
export class App {
static inject = function () { return [Router] };
constructor (router) {
this.router = router.configure((config) => {
config.routes = [
{ route: '/', name: 'main', moduleId: 'main-view', title: 'main'}
];
});
this.isActive = true;
}
toggle () {
this.isActive = !this.isActive;
}
}
<template>
<button click.delegate="toggle()">Toggle the router-view</button>
<br />
<div if.bind="isActive">
<router-view></router-view>
</div>
</template>
/*******************************************************************************
* The following two lines enable async/await without using babel's
* "runtime" transformer.
*
* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
*
* Feel free to remove these lines if your plunker doesn't use async/await.
*/
import regeneratorRuntime from 'babel-runtime/regenerator';
window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot());
}
import {customElement, bindable, bindingMode, inlineView, containerless} from 'aurelia-framework';
import {AureliaKendoDatasource} from './aurelia-kendo-datasource';
@customElement('auto-complete')
@containerless()
@inlineView('<template><input type="text" ref="proxy" class.bind="class" /></template>')
@bindable({ name: 'value', changeHandler: 'valueChanged', defaultValue: [], defaultBindingMode: bindingMode.twoWay })
@bindable({ name: 'data', changeHandler: 'dataChanged', defaultValue: [], defaultBindingMode: bindingMode.oneWay })
@bindable({ name: 'options', changeHandler: 'optionsChanged', defaultValue: {}, defaultBindingMode: bindingMode.oneWay })
@bindable({ name: 'class', defaultValue: '', defaultBindingMode: bindingMode.oneWay })
export class AutoComplete {
attached () {
console.log(this.proxy);
this.dataSource = new AureliaKendoDatasource(this.data, { serverFiltering: true });
var element = $(this.proxy).kendoAutoComplete(Object.assign({}, this.options, {
dataSource: this.dataSource
}));
this._dataComponent = element.data('kendoAutoComplete');
this._dataComponent.bind('change', (event) => {
// Kendo autocomplete doesn't provide the dataSource value back, so we have to handle this here.
var textfield = (this.options || {}).dataTextField;
var newValue = event.sender.value();
var selected = textfield != null
? this.dataSource._data.filter((value) => value[textfield] == newValue)
: this.dataSource._data.filter((value) => value === newValue);
// Since autocomplete allows freeform input as well, we assign the freeform value if necessary.
this.value = selected.length
? selected[0]
: { [textfield.toString()]: newValue };
});
}
detached () {
this._dataComponent.destroy();
this._dataComponent = null;
}
}
// Handlers
AutoComplete.prototype.valueChanged = function (value) {
if (this._dataComponent) {
console.log("value changed", value);
var textfield = (this.options || {}).dataTextField;
if (value == null) {
this._dataComponent.value('');
return;
}
this._dataComponent.value(value != null && textfield != null ? value[textfield] : value.toString() || '');
}
};
AutoComplete.prototype.dataChanged = function (value) {
if (this._dataComponent) {
this.dataSource = new AureliaKendoDatasource(value, { serverFiltering: true });
this._dataComponent.setDataSource(this.dataSource);
}
};
AutoComplete.prototype.optionsChanged = function (value) {
if (this._dataComponent) {
this._dataComponent.setOptions(value);
}
};
var Kendo = kendo;
export class AureliaKendoDatasource extends Kendo.data.DataSource {
constructor (data, options = {}) {
var readFn = typeof data === 'function'
? data
: (options) => { return Promise.resolve(data) };
Object.assign(options, {
transport: {
read: function (opts) {
console.log('arguments', arguments);
readFn(opts)
.then(opts.success)
.catch(e => opts.error([]));
}
}
});
super(options);
}
}
<template>
<require from="./auto-complete"></require>
<button click.delegate="toggle()">Toggle the if binding</button>
<br />
<div if.bind="flag">
<auto-complete data.bind="data" value.bind="selected"></autocomplete>
</div>
</template>
export class MainView {
constructor () {
this.flag = true;
this.data = ['Alpha', 'Bravo', 'Charlie'];
}
toggle () {
this.flag = !this.flag;
}
}