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>

laterの値がsomeVar変更された場合、ビューは更新されますか?

4

1 に答える 1

1

div 要素の innerhtml プロパティをビューモデルの someVar プロパティにバインドすると、 someVar が変更されたときにビューが更新されます。

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

于 2015-08-23T10:41:29.557 に答える