Question

我通常是Aurelia和前端框架的新手。我有List的页面

list.html

<template>
    <require from="services/list-item"></require>
    <div class="container-fluid">
        <div class="row row-centered container-top-space">
            <div repeat.for="item of items">
                <list-item item.bind="item"></list-item>
            </div>
        </div>
    </div>
</template>

list.js

 import { inject } from 'aurelia-framework';
    import { HttpClient, json } from 'aurelia-fetch-client';
    @inject(HttpClient)

    export class ListItem{
        constructor(httpClient) {
        this.items= [];

        httpClient.configure(...);
      }
    }

和ListItem

列表item.html

<template>
    <div class="row">
        <div class="list-item">
            <div class="form-control-inline" style="width:33%">
                <span>${item.name}&ensp;&ensp;</span>
        </div>
        <div class="form-control-inline" style="width:54%">
            <span>${item.value}</span>
        </div>
        <div class="pull-right" style="width:100px">
            <button class="btn btn-list-item" type="submit" name="submit" click.delegate="edit($event.target.parentElement)">Edit</button>
        </div>
    </div>
  </div>
</template>

列表item.js

import { bindable } from 'aurelia-framework';

export class ListItem{
    @bindable item;

    edit(element){
        //I'd like to replace view component with update component here
    }
}

我想在调用编辑函数时更改list-item-edit上列表项的模板，但完全不知道如何制作它。

如何更换Aurelia组件？

0 个答案: