- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我似乎无法让它们协同工作。我正在使用 Aurelia CLI,并以类似的方式成功地对其他库(如 select2、spin、moment 和 numeral)进行了操作。我似乎无法让 toastr 工作。这是我目前所拥有的。
首先,我运行了 npm install toastr --save
和 typings install dt~toastr --global --save
在 aurelia.json
的 vendor-bundle.js 部分,我添加了一个依赖项:
"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr/build",
"main": "toastr.min",
"resources": [
"toastr.min.css"
],
"deps": ["jquery"]
}
更新:重现的完整步骤
我安装了这些工具的这些版本:node (6.3.0)、npm (3.10.3)、au (0.17.0)
打开命令提示符并输入:
au new au-toastr
3 (Custom)
2 (Typescript)
3 (Sass)
1 (configure unit testing)
1 (Visual Studio Code)
1 (create project)
1 (install project dependencies)
cd au-toastr
npm install jquery --save
npm install toastr --save
typings install dt~jquery --global --save
typings install dt~toastr --global --save
然后在编辑器中打开aurelia.json
并添加
"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr/build",
"main": "toastr.min",
"resources": [
"toastr.min.css"
],
"deps": ["jquery"]
}
到依赖项的底部。
在 typings/globals/angular-protractor/index.d.ts
上注释掉第 1839 行(declare var $: cssSelectorHelper;
) 因为与 jquery 的 .d 冲突.ts 文件。
将 app.ts
内容替换为
import * as toastr from 'toastr';
export class App {
activate() {
toastr.info('blah');
}
}
或
import 'toastr';
export class App {
activate() {
toastr.info('blah');
}
}
在命令提示符中键入 au run
,然后打开浏览器并导航到命令行显示应用程序可用的 url(通常是 http://localhost:9000
)。
尝试 1
import 'toastr';
export class ViewModel {
activate() {
toastr.info('blah');
}
}
错误:ReferenceError:未定义 toastr
尝试 2
import {autoinject} from 'aurelia-framework';
import 'toastr';
@autoinject()
export class ViewModel {
constructor(private toastr: Toastr) {
}
activate() {
this.toastr.info('blah');
}
}
错误:类型错误:this.toastr.info 不是函数
尝试 3
import * as toastr from 'toastr';
export class ViewModel {
activate() {
toastr.info('blah');
}
}
错误:类型错误:toastr.info 不是函数
尝试 4
import {autoinject} from 'aurelia-framework';
import * as toastr from 'toastr';
@autoinject()
export class ViewModel {
constructor(private toastr: Toastr) {
}
activate() {
this.toastr.info('blah');
}
}
错误:类型错误:this.toastr.info 不是函数
当我从命令行运行 au build
时,上述所有内容都能正确转译。我没有收到任何错误。
我不知道我错过了什么或者我还能尝试什么。任何帮助将不胜感激!
更新:我的猜测是 aurelia-cli
中存在错误,或者更可能是我在某种程度上错误地处理了与 有关的包>aurelia-cli
加载机制。当我从他们的网站(使用 jspm 作为模块加载器)获取 typescript 框架并按照上述相同步骤操作时,toastr 工作正常。
我有什么想法可以让它与 aurelia-cli 一起工作吗?
最佳答案
经过很多时间和 friend 的帮助,我终于能够让它工作。
只需要进行一些更改 -
aurelia.json
需要更新才能不使用缩小版的 toastr 库。
{
//...
"dependencies": [
//...
"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr",
"main": "toastr",
"resources": [
"build/toastr.min.css"
],
"deps": ["jquery"]
}
]
}
toastr.info('here');
函数调用通常需要在附加方法中发生,或者在元素在 DOM 中可用之后发生。
要求app.html
中的HTML需要更新为
<require from="toastr/build/toastr.min.css"></require>
希望这对您有所帮助。
更新然后在您的 View 模型中使用它,您可以通过以下几种方式之一进行:
import * as toastr from 'toastr';
export class App {
attached() {
toastr.success('here');
}
}
import { success } from 'toastr';
export class App {
attached() {
success('here');
}
}
关于typescript - toastr.js 如何在 Aurelia 和 Typescript 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39022758/
我是一名优秀的程序员,十分优秀!