0

我正在尝试制作一个“插入文件”自定义元素。

这就是它的使用方式

<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。

问题是：

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

我究竟做错了什么？有任何想法吗？

- - 编辑 - -

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

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

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

4

1 回答 1

1

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

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

于 2015-08-23T10:41:29.557 回答