Change view

app.html

<template>
    <button type="button" click.delegate="onChange($event, 'm1')">M1</button>
    <button type="button" click.delegate="onChange($event, 'm2')">M2</button>
    <compose view.bind="view" model.bind="this"></compose>
</template>

app.js

import {inject} from 'aurelia-framework';

export class BasicUse {
  currentData = null;
  view = null;
  
  onChange(event, viewName){
    this.view = viewName + ".html";
    this.currentData = {a: viewName + 'value', currency: '46'} 
  }
}

d.html

<template>
  D: ${value}
  <ak-combobox k-data-text-field="_name"
                    					k-data-value-field="__text"
                              k-data-source.bind="data"
                              k-value.two-way="_currency"
                              k-filter="contains"
                              k-suggest.bind="true"
                              style="width: 100%;">
            </ak-combobox>
</template>

d.js

import {bindable} from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';

export class D {
  @bindable
  value = null;

  @bindable
  currency = null;
  
  _currency = null;
  
  data = new kendo.data.DataSource(
                {
                transport: {
                    read: (o) => {
                      let http = new HttpClient();
                      http.fetch('data.xml')
                          .then(response => response.text()).
                          then(data => o.success(data));
                    }
                },
                schema: {
                    type: "xml",
                    data: "list/item",
                    model: {
                        id: "__text",
                        fields: {
                            _name: "@name",
                            _shortname: "@shortname",
                            __text: "@id",
                            extraInfo: "extraInfo"
                        }
                    }
                }
            });
     
    bind(){
    console.log("Bind"); 
    }
            
    currencyChanged(newValue, oldValue){
      //some processing here
      console.log("Currency changed");
      this._currency = newValue;
    }
}

data.xml

<list>
  <item id="241" shortname="AED" name="AED">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="601" shortname="ARS" name="Argentine Peso">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="81" shortname="AUD" name="Australian Dollar">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="301" shortname="BRL" name="Brazilian Real">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="163" shortname="CAD" name="Canadian Dollar">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="46" shortname="CHF" name="Swiss Franc">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="485" shortname="CLP" name="Chile Peso">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="561" shortname="CNY" name="Chinese Yuan">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="341" shortname="CZK" name="Czech Koruna">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="661" shortname="DKK" name="Danish krone">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="27" shortname="EUR" name="Euro">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="65" shortname="GBP" name="British Pound">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="101" shortname="HUF" name="HUF">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="55" shortname="JPY" name="Japanese Yen">
    <extraInfo class="list">
      <int>0</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="381" shortname="MXN" name="Mexican Peso">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="141" shortname="NOK" name="NOK">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="520" shortname="PLN" name="PLN">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="452" shortname="RON" name="Romania New Leu">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="421" shortname="RUB" name="Russia Ruble">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="201" shortname="SEK" name="SEK">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="264" shortname="SGD" name="SGD">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
  <item id="23" shortname="USD" name="US Dollar">
    <extraInfo class="list">
      <int>2</int>
      <extraItem name="nonDeliverable">
        <value class="boolean">false</value>
      </extraItem>
    </extraInfo>
  </item>
</list>

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>

m1.html

<template>
  <require from="d"></require>
  M1 ${currentData.a} <d value.bind="currentData.a" currency.bind="currentData.currency"></d>
</template>

m2.html

<template>
  M2 ${currentData.a}
</template>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}