Aurelia:视图和视图模型的继承

Question

我正在构建一个Aurelia应用程序，它将基本上允许用户显示不同资源的不同列表。这些列表共享一些功能，比如具有搜索和刷新功能的工具栏和分页的资源列表。

我是为单个资源创建的，所有的东西都很有魅力，但是现在我需要复制TypeScript代码的大部分，以及其他资源列表的HTML。我决定采用一种不同的方法，用一些命名的视图槽和一个抽象的视图模型创建一个自定义元素。这对于第一次运行是有效的，但是在操作列表之后，它将立即停止更新插槽内容。

有没有办法实现我想做的事？

任何帮助都将不胜感激。

side ：我尝试创建一个简单的Gist来演示这个问题，但我发现的最新CDN版本似乎还不支持视图槽(我无法让它工作)。:(

基本上，我想做的是：

list.html

<template>
    <div>list: ${counter}</div>
    <slot></slot>
    <button click.delegate="load()">Increase counter</button>
</template>

list.ts

import { autoinject } from 'aurelia-dependency-injection';
import { customElement } from 'aurelia-templating';

@customElement('list')
@autoinject
export abstract class List {
    public abstract counter;
    public abstract load();
}

resource.html

<template>
    <require from="./list"></require>

    <list>
        <div>resource: ${counter}</div>
    </list>
</template>

resource.ts

import { autoinject } from 'aurelia-dependency-injection';
import { List } from './list';

@autoinject
export class App extends List {
    public counter = 0;

    constructor() {
        super();
    }

    public load() {
        this.counter++;
    }
}

这提供了以下输出：

list: 0
resource: 0
<button>Increase counter</button>

单击按钮后，它应该同时增加列表和资源计数器，但是它仍然显示资源的"“。我的猜测是，该按钮正在调用抽象父类上的load函数，该类没有实现，因此什么也不做。将按钮更改为子类将有效，但实际上无助于实现代码减少目标。如何继续使用实现者的(资源)绑定上下文？有办法吗？还是我完全偏离轨道了？

编辑

所以我找到了解决这个问题的方法，但感觉不太对劲。我更改了List中的以下部分

@bindable({defaultBindingMode: bindingMode.twoWay}) public abstract counter:number;

然后在resource HTML中：

<list counter.bind="counter">
    <div>users: ${counter}</div>
</list>

这样，它就会同步counter属性的绑定上下文。我更希望有一种方法告诉列表根本就没有自己的绑定上下文，因为理论上这可能会导致许多绑定对象。有人知道我如何告诉List继承绑定上下文吗？

编辑2

为前面的编辑找到另一个解决方案，删除绑定行为，并在bind组件中实现List回调。这使我可以作为第一个参数访问父绑定上下文。我在本地保存在List组件中，然后在counter属性更改时手动更新父绑定上下文。这仍然是一种解决办法，因为这将使List组件变得相当大，但允许我不必担心资源中的绑定。List现在看起来如下所示：

import { customElement } from 'aurelia-templating';
import { autoinject } from 'aurelia-dependency-injection';
import { observable } from 'aurelia-binding';

@customElement('list')
@autoinject
export abstract class List {
    private parentContext;
    @observable public abstract counter:number;

    bind(bindingContext) {
        this.parentContext = bindingContext;
    }

    counterChanged(newValue) {
        if (this.parentContext) this.parentContext.counter = newValue;
    }

    public abstract load();
}

我仍然感兴趣的是一种完全删除List组件的绑定上下文的方法，让它继承父绑定上下文。

Note instruction.inheritBindingContext在这个GitHub问题中提到的行为就像一个one-time初始继承，因此在我的例子中没有用，但可能对其他人有用。

Answer 1

在编辑2之后，当我实现了多个资源列表时，我仍然会遇到问题。好像是在做各种各样的函数，x次。因此，我现在只更新父(资源)上下文，而不是手动同步绑定上下文，如下所示：

List.ts

import { customElement } from 'aurelia-templating';

@customElement('list')
export abstract class List {
    public parentContext;
    public abstract counter:number;

    bind(bindingContext) {
        this.parentContext = bindingContext;
    }

    public abstract load();
}

List.html

<template>
    <div>list: ${parentContext.counter}</div>
    <slot></slot>
    <button click.delegate="parentContext.load()">Increase counter</button>
</template>

这不仅降低了我的List的复杂性，而且更有意义，而且不太容易出错。

Answer 2

看一看这个博客文章奥雷利亚动态构图使用撰写和v模型和模型，您可以在同一个列表中有不同的自定义元素。