Skip to content

Instantly share code, notes, and snippets.

@len-ro

len-ro/app.html

Last active September 2, 2016 17:07
Show Gist options
  • Save len-ro/5fa37c1615729e49154ef3214aa6e41d to your computer and use it in GitHub Desktop.
Save len-ro/5fa37c1615729e49154ef3214aa6e41d to your computer and use it in GitHub Desktop.
Download ZIP
Menu: basic usage
Raw
app.html
<template>
<section>
<router-view></router-view>
</section>
</template>
Raw
app.js
import {Redirect, Router, NavigationInstruction, RouterConfiguration} from 'aurelia-router';
export class App {
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Diapason';
config.map([
{ route: ['', 'login'], name: 'login', moduleId: 'login', title: 'Login'},
{ route: ['diapason'], name: 'diapason', moduleId: 'initial', title: 'Diapason', }
]);
this.router = router;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia KendoUI bridge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
initial.html
<template>
<ul ak-menu k-on-select.delegate="onSelect($event.detail)">
<li>
Modules
<ul>
<li><span class="d-menuitem" data-id="m1">First module</span></li>
<li><span class="d-menuitem" data-id="m2">Second module</span></li>
</ul>
</li>
</ul>
<div id="tabstrip" ak-tabstrip="k-animation.bind: { open: { effects: 'fadeIn' } }; k-widget.two-way: tabStrip">
<ul>
<li class="k-state-active" t="title">
Initial
</li>
</ul>
<div>
<div>
<p t="content">
Initial content here
</p>
</div>
</div>
</div>
</template>
Raw
initial.js
import {inject} from 'aurelia-framework';
import {Container} from 'aurelia-dependency-injection';
import {TemplatingEngine, ViewSlot, ViewResources, View } from 'aurelia-templating';
@inject(Container, TemplatingEngine, ViewResources)
export class Initial {
constructor(container:Container, templatingEngine:TemplatingEngine, viewResources:ViewResources){
this.templatingEngine = templatingEngine;
this.container = container;
this.instruction = {
//viewResources: viewResources,
//currentController: null
};
}
onSelect(e){
let menuId = $(e.item).children(".k-link").children(".d-menuitem").attr("data-id");
if(typeof(menuId) === 'undefined')return;
let menuName = $(e.item).children(".k-link").text();
let moduleDivId = 'module' + (this.tabStrip.items().length + 1);
console.log('Selected: ' + menuId + ", " + menuName);
this.tabStrip.append({
text: '<span>' + menuName + '</span>',
content: '<compose view-model="' + menuId + '" id="' + moduleDivId + '"></compose>',
encoded: false
});
let el = document.getElementById(moduleDivId);
let view = this.templatingEngine.enhance({ element: el, bindingContext: {}, overrideContext: {}});
view.bind();
view.attached();
var tabstrip = $("#tabstrip").data("kendoTabStrip");
var lastTab = tabstrip.tabGroup.children("li").last();
tabstrip.select(lastTab);
}
}
Raw
login.html
<template>
<button click.delegate="doLogin($event)">login</button>
</template>
Raw
login.js
import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
@inject(Router)
export class Login {
constructor(router:Router){
this.router = router;
}
doLogin(event){
this.router.navigate("diapason");
}
}
Raw
m1.html
<template>
<input ak-datepicker="k-widget.bind: datepicker" />
${readonly}
<button type="button" click.delegate="click($event)">change</button>
</template>
Raw
m1.js
import {transient} from 'aurelia-dependency-injection';
@transient()
export class M1 {
click(event){
this.readonly = !this.readonly;
}
}
Raw
m2.html
<template>
<!--<ak-combobox k-value.two-way="size">-->
<!-- <select style="width: 100%;">-->
<!-- <option>X-Small</option>-->
<!-- <option>Small</option>-->
<!-- <option>Medium</option>-->
<!-- <option>Large</option>-->
<!-- <option>X-Large</option>-->
<!-- <option>2X-Large</option>-->
<!-- </select>-->
<!-- </ak-combobox>-->
Value: ${cnt}
<button type="button" click.delegate="click($event)">change</button>
</template>
Raw
m2.js
export class M2 {
cnt = 1;
click(event){
this.cnt = this.cnt + 1;
}
}
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment