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属性绑定到viewmodel的someVar属性，则当someVar更改时，视图将更新。

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

使用observerLocator更改检测

1 个答案: