我开始冒险进入Angular2做一个爱好项目,并遇到了一些我不知道如何调试或搜索的事情。
我开始使用ng2-play存储库。
我有两个简单的类(这篇文章的代码大大简化了):
词语-ui.js
export class WordsUI {
constructor() {
new Words(data => this.words = data);
}
}
词语-ui.html
<ol *if="words" reversed>
<li *for="#entry of words" title="Word for week starting {{entry.date}}">{{entry.word}}</li>
</ol>
词语-data.js
export class Words {
constructor(cb) {
firebase
.child('words')
.on('value', data => cb(data.val()));
}
}
唯一不能正常工作的是“范围”,认识到属性words
的值已更新。这意味着当UI加载时,单词列表中不会显示任何内容。如果我然后通过UI向列表添加单词,则所有单词加上添加的单词都会显示出来。或者,如果我输入一个setTimeout来“重新加载”words
属性,并显示它们自己的值。
我想我没有使用正确的模式,但我会在哪里找出哪种模式对这种情况更好。我在新的ES6模块系统中有点迷失:TypeScript和AngularJS 2.
我认为我提供了代码的相关部分来说明问题,但如果没有,请告诉我,我可以努力将更好的东西组合在一起。
更新1:添加了视图文件。 <{1}}实例的“上下文”对words
的更改未得到反映。
答案 0 :(得分:2)
所以我找到了一个答案 - 或者根据你的观点解决这个问题 - 在最初遇到它之后几个小时。此业余爱好项目的最终存储库位于GitHub Weekly Word。
我本质上是尝试在传递给Word构造函数的回调中设置WordsUI实例上的属性。我想某种方式并没有被接受,而是范围观察者&#34; zones.js
(我认为)。
我将数据的读取从Word实例移动到来自实例的后续调用中;而不是试图变得棘手,并将其保留在传递给构造函数的回调中。
我不认为这种方法 - 我最终使用的方法 - 是劣质的,前者也不是真正的优势。
词语-ui.js
export class WordsUI {
constructor() {
this words = new Words();
this.update();
}
update() {
this.words
.read(words => {
this.wordList = words;
})
}
}
词语-data.js
export class Words {
constructor() {
firebase = new Firebase('http://weekly-word.firebase.com').child('words');
}
read(cb) {
firebase
.on('value', data => {
cb(data);
})
}
}