将视图模型的属性绑定到Aurelia中的自定义元素 [英] Binding properties from view-model to custom element in Aurelia

问题描述

更新:

其他人报告了此样本对他们而言效果很好.听起来好像我做错了什么，但是我没有代码了，所以我无法检查问题所在.

Other people have reported this sample works well for them. Sounds like I was doing something wrong but I don't have the code anymore so I can't check what was the problem.

原始问题:

我具有以下具有以下视图模型和视图的自定义元素:

I have the following custom element with the following view-model and view:

import {bindable} from 'aurelia-framework';
export class Test1 {
  @bindable name = null;
}

<template>
  <div>Name: ${name}</div>
</template>

然后，使用上面的自定义元素(这是框架项目中的欢迎页面)，获得一个该视图和一个视图模型:

Then I have a this view and view-model using the above custom element (this is the welcome page in the skeleton project):

export class Welcome {
  constructor() {
    this.name = 'Test';
  }
}

<template>
  <require from="./components/test1"></require>
  <test1 name.bind="name"></test1>
</template>

我的期望是看到名称:测试"，但我只会得到名称:".如果我使用字符串并删除了".bind"，那么它将起作用:

My expectation is to see "Name: Test" but I only get "Name: ". If I use a string and remove the ".bind" then it works:

<test1 name="Test"></test1>

但是我希望每当我更新应用程序"视图模型中的名称"字段时，它就会自动更新.

But I want it to update automatically whenever I update the "name" field in the "App" view-model.

我不确定自己在做什么错.我在控制台中看不到任何错误.

I'm not sure what I'm doing wrong. I don't see any error in the console.

我以来自Aurelia的骨架样本项目为例. aurelia-framework的版本是0.11.0.

I based this example on the skeleton sample project from Aurelia. Version of aurelia-framework is 0.11.0.

推荐答案

欢迎"类中的道具名称"应该是可绑定的.

The prop "name" in "Welcome" class should be bindable.

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable name = ''

  constructor() {
    this.name = 'Test';
  }
}

这篇关于将视图模型的属性绑定到Aurelia中的自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！