Aurelia 动态负载

Question

Aurelia 是否有可能使用他的视图模型动态加载视图？例如，我有一个模块列表，我单击其中一个，目标视图将加载到页面中。该列表事先未知，因此我无法加载所有模块。

型号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

方法一

在您的 app.js class 的 configureRouter 方法中加载数据。加载数据后，您可以配置路由器。请确保 return 来自 configureRouter 的承诺。

方法二

使用 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>

Aurelia 动态负载

Aurelia dynamic load

javascript

aurelia

方法一

方法二

Here's a working plunk