使用 observerLocator 进行变化检测

Question

我正在尝试制作一个 'insert-file' 自定义元素。

这是它的用法

<template>
  <require from='./insert-file'></require>

  <section>
    <insert-file fileName.bind="fn.fileName"></insert-file>
  </section>
</template>

这是自定义元素的视图

<template>
  <div innerhtml.bind="fileContent"></div>
</template>

这是元素的视图模型

import {inject,bindable,customElement,ObserverLocator} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@customElement('insert-file')
@inject(HttpClient,ObserverLocator)
export class InsertFile {
    @bindable fileName = '';

    constructor(http,observerLocator) {
        this.http = http;
        this.fileContent = '...trying';
        var subscription = observerLocator
            .getObserver(this, 'fileName')
            .subscribe(this.onFileNameChange.bind(this));
    }

    onFileNameChange(newValue, oldValue) {
        function onSuccess(response) {
            this.fileContent = 'success';
        }
        function onFailure(response) {
            this.fileContent = 'failure';
        }
        this.http.get(newValue).then(onSuccess.bind(this), onFailure.bind(this));
    }

}

想法是在 fileName 属性发生变化时注意（在我的用例中以编程方式，而不是以交互方式）并采取适当的措施，即加载文件并将其内容插入 DOM.

问题在于：

它不起作用（没有错误消息，在调试器中一切似乎都正常）
'this' 的双重绑定似乎太复杂了

我做错了什么？有什么想法吗？

--- 编辑 ---

让我简化一下。我可以这样做吗？

<div innerhtml.bind="someVar"></div>

如果someVar的值以后发生变化，视图会更新吗？

Answer 1

如果将 div 元素的 innerhtml 属性绑定到视图模型的 someVar 属性，视图 将在 someVar 更改时更新。

http://aurelia.io/docs.html#innerhtml

使用 observerLocator 进行变化检测

change detection with the observerLocator

aurelia