Aurelia动态负载

Question

Aurelia是否有可能动态加载视图模型的视图？ 例如，我有一个模块列表，我点击其中一个模块，目标视图将被加载到页面中。该列表不是先验的，因此我无法加载所有模块。

model example.js

export class Modules{
  list = [];

  constructor(socket) {
    socket.on('update', list => this.list);
  }

  select(module) {
    //load and display the module view
  }
}

查看example.html

<template>
  <ul>
    <li repeat.for="module of list" click.delegate="$parent.select(module)">${module.name}</li>
  </ul>
  <div class="target">
    <!-- Here should be loaded the module -->
  </div>
</template>

Answer 1

方法1

在app.js班级configureRouter方法中加载数据。加载数据后，您可以配置路由器。请务必从configureRouter返回承诺。

方法2

使用Aurelia的<compose>元素用适当的视图组合所选模块。

Here's a working plunk

代码：

<强> app.js

import {inject} from 'aurelia-framework';
import {MockSocket} from './mock-socket';

@inject(MockSocket)
export class App {
  list;
  selectedModule;

  constructor(socket) {
    socket.on('update', list => this.list = list);
  }

  select(module) {
    this.selectedModule = module;
  }
}

<强> app.html

<template>
  <ul>
    <li repeat.for="module of list">
      <button type="button" click.delegate="$parent.select(module)">${module.path}</button>
    </li>
  </ul>
  <div class="target">
    <compose view-model.bind="selectedModule.path"></compose>
  </div>
</template>