Thanood · April 11, 2016 18:30
diff --git a/app.html b/app.html
 <template>
  <router-view></router-view>
 </template>
diff --git a/app.js b/app.js
 export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['','products'], name: 'products', moduleId: './products', nav: true, title:'Products' },
      { route: 'details', name: 'details', moduleId: './details', nav: true, title:'Detail' }
    ]);

    this.router = router;
  }
 }
diff --git a/details.html b/details.html
 <template>
  <p>product: ${name}</p>
  <a route-href="route:products">back</a>
 </template>
diff --git a/details.js b/details.js
 export class Detail {
  name = '<empty>';
  activate(params) {
    this.name = params.id;
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </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-materialize-bundles/0.1.1/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
 </html>
diff --git a/main.js b/main.js
 /*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 * 
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
 //import regeneratorRuntime from 'babel-runtime/regenerator';
 //window.regeneratorRuntime = regeneratorRuntime;
 /******************************************************************************/

 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

  aurelia.start().then(a => a.setRoot());
 }
diff --git a/products.html b/products.html
 <template>
  <tr repeat.for="product of products">
    <td>${product.Name}</td>
    <td>${product.Size}</td>
    <td>
        <div class="actions">
            <a md-dropdown="activates.bind: 'productlist-dropdown-' + product.Id; below-origin: true;">
                <i class="material-icons center primary-text hoverable">more_vert</i>
            </a>
            <!-- route-href="route:details; params.bind:{id:product.Name}"-->
            <ul id="productlist-dropdown-${product.Id}" class="dropdown-content">
                <li><a route-href="route:details; params.bind:{id:product.Name}">Edit the ${product.Name} (${product.Size})</a></li>
                <li class="divider"></li>
                <li><a>Duplicate</a></li>
                <li><a>Remove</a></li>
            </ul>
        </div>
    </td>
  </tr>
 </template>
diff --git a/products.js b/products.js
 export class Products {
  products = [
    { Id: 0, Name: 'product 1', Size: 'XL' },
    { Id: 1, Name: 'product 2', Size: 'XXL' },
    { Id: 2, Name: 'product 3', Size: 'S' },
    { Id: 3, Name: 'product 4', Size: 'M' }
  ];
 }
	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map([
	{ route: ['','products'], name: 'products', moduleId: './products', nav: true, title:'Products' },
	{ route: 'details', name: 'details', moduleId: './details', nav: true, title:'Detail' }
	]);

	this.router = router;
	}
	}
	<template>
	<p>product: ${name}</p>
	<a route-href="route:products">back</a>
	</template>
	export class Detail {
	name = '<empty>';
	activate(params) {
	this.name = params.id;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</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-materialize-bundles/0.1.1/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	/*******************************************************************************
	* The following two lines enable async/await without using babel's
	* "runtime" transformer. Uncomment the lines if you intend to use async/await.
	*
	* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
	*/
	//import regeneratorRuntime from 'babel-runtime/regenerator';
	//window.regeneratorRuntime = regeneratorRuntime;
	/******************************************************************************/

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

	aurelia.start().then(a => a.setRoot());
	}
	<template>
	<tr repeat.for="product of products">
	<td>${product.Name}</td>
	<td>${product.Size}</td>
	<td>
	<div class="actions">
	<a md-dropdown="activates.bind: 'productlist-dropdown-' + product.Id; below-origin: true;">
	<i class="material-icons center primary-text hoverable">more_vert</i>
	</a>
	<!-- route-href="route:details; params.bind:{id:product.Name}"-->
	<ul id="productlist-dropdown-${product.Id}" class="dropdown-content">
	<li><a route-href="route:details; params.bind:{id:product.Name}">Edit the ${product.Name} (${product.Size})</a></li>
	<li class="divider"></li>
	<li><a>Duplicate</a></li>
	<li><a>Remove</a></li>
	</ul>
	</div>
	</td>
	</tr>
	</template>
	export class Products {
	products = [
	{ Id: 0, Name: 'product 1', Size: 'XL' },
	{ Id: 1, Name: 'product 2', Size: 'XXL' },
	{ Id: 2, Name: 'product 3', Size: 'S' },
	{ Id: 3, Name: 'product 4', Size: 'M' }
	];
	}