打字稿中的@bindable 不起作用答案

【问题标题】：@bindable in typescript not working打字稿中的@bindable 不起作用
【发布时间】：2015-08-11 08:41:46
【问题描述】：

我正在使用 aurelia 和 TypeScript (v 1.5.4)。我正在使用来自https://github.com/aurelia/<>/blob/master/dist/amd/aurelia-<>.d.ts 的类型化定义。此外，我正在使用 VS 2015 进行开发，并使用以下 TypeScript 构建配置：。

但是，当我在我的虚拟机和视图中使用 @bindable 时，它似乎无法正常工作。以下是我尝试在导航栏中使用的示例：

nav-bar.ts:

import aur = require("aurelia-framework");
import bindable = aur.bindable;

export class NavBar {
      @bindable router = null;
      ....
}

这就是我在app.html 中使用它的方式：

<template>
<import from='./nav-bar'></import>

<nav-bar router.bind="router"></nav-bar>


<div class="page-host row">
    <router-view></router-view>
</div>
</template>

但由于某种原因它不起作用。如果我需要做一些不同的事情，请告诉我。

谢谢。

【问题讨论】：

应该import bindable = aur.bindable; 行说var bindable = aur.bindable; 吗？

标签： typescript aurelia

【解决方案1】：

我最近切换到了 TypeScript，但我不需要更改我的 @bindable，我确实添加了一个类型来让编译器满意...

import { bindable} from 'aurelia-framework';

export class SomeClass{
  @bindable property: boolean = false;
  ...
}

虽然我的 NavBar 确实遇到了问题，因为我既要绑定路由器又要注入它，在这种情况下，我为注入的路由器使用了别名。

【讨论】：

感谢您的回答。我尝试使用import {} from '' 语法而不是require()，并添加Router 类型，例如：@bindable router:Router = null;。然而不幸的是，绑定仍然不起作用。

【解决方案2】：

确保您已将 TypeScript 编译器选项设置为启用 experimentalDecorators。如果您使用 Visual Studio，则可以在 .*proj 文件中完成此操作；如果您使用 Gulp / 命令行，则可以在 tsconfig.json 文件中完成。

tsconfig.json

{
  "version": "1.5.0",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "listFiles": true,
    "outDir": "dist",
    "experimentalDecorators": true
  }
}

.*proj

<PropertyGroup>
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <DefineConstants>TRACE;DEBUG</DefineConstants>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators
</PropertyGroup>

有关详细信息，请参阅此问题：

Visual Studio 2015 RC Typescript experimental decorators error

【讨论】：