aurelia 数据绑定中断？答案

【问题标题】：aurelia databinding breaks?aurelia 数据绑定中断？
【发布时间】：2017-11-09 09:39:51
【问题描述】：

使用 Aurelia 网络，数据绑定似乎默默地将数据修改为 data.toString()?

假设我有一个最小的类（simpleFieldModel.js）：

export class SimpleFieldModel {
    the_data() {
        return "eeew";
    }
}

主视图看起来像（app.html & app.js）：

<template>
    <require from="./field"></require>
    <field field=${field}></field>
</template>

import {SimpleFieldModel} from './SimpleFieldModel';

export class App {
    constructor() {
        this.field  = new SimpleFieldModel();
        let n = this.field.the_data();
    }
}

自定义的 html 元素看起来像（field.html & field.ts）：

<template>
    ${fieldName}
</template>

import {bindable, bindingMode} from 'aurelia-framework';
import {FieldModel} from "./FieldModel";
import {SimpleFieldModel} from "./SimpleFieldModel";

export class Field {
    @bindable({defaultBindingMode: bindingMode.OneTime}) field: SimpleFieldModel = undefined;

    secretMessage = 'Be sure to drink your Ovaltine!';

    constructor() {
    }

    get fieldName(): string {
        if (this.field !== undefined) {
            let fm = new SimpleFieldModel();
            alert(fm.the_data());
            alert(this.field.the_data())
            return this.field.the_data();
        } else {
            return "undefined";
        }
    }
}

现在在第一次警报后的“崩溃”之上。 - 使用 webstorm 的调试器显示“the_data 未定义”。 - 进一步分析表明this.field实际上是一个字符串，只是实际字段的字符串表示。 - 那么我将如何像上面的例子一样“链绑定”？如何使Field 类中的field 成员绑定到app 类的field 成员？

【问题讨论】：

标签： javascript data-binding aurelia

【解决方案1】：

app.html 中的绑定<field field=${field}></field> 会将字段值转换为字符串。您应该使用<field field.bind='field'></field> 将field 中保存的实际对象绑定到field 组件。

【讨论】：