我从一个带有Aurelia，RethinkDB和Socket.IO的简单TODO应用开始。我似乎在重新渲染或重新评估通过Socket.IO更改的对象时遇到问题。因此，基本上，所有内容在第一个浏览器上都可以正常运行，但是在控制台中显示对象时，并不能在第二个浏览器中重新呈现，这确实表明了我的对象存在差异。问题仅在于更新对象，它完全适用于从待办事项数组中创建/删除对象。
的HTML
<ul>
<li repeat.for="item of items">
<div show.bind="!item.isEditing">
<input type="checkbox" checked.two-way="item.completed" click.delegate="toggleComplete(item)" />
<label class="${item.completed ? 'done': ''} ${item.archived ? 'archived' : ''}" click.delegate="$parent.editBegin(item)">
${item.title}
</label>
<a href="#" click.delegate="$parent.deleteItem(item, $event)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
<div show.bind="item.isEditing">
<form submit.delegate="$parent.editEnd(item)">
<input type="text" value.bind="item.title" blur.delegate="$parent.editEnd(item)" />
</form>
</div>
</li>
</ul>
具有RethinkDB changefeed的NodeJS
// attach a RethinkDB changefeeds to watch any changes
r.table(config.table)
.changes()
.run()
.then(function(cursor) {
//cursor.each(console.log);
cursor.each(function(err, item) {
if (!!item && !!item.new_val && item.old_val == null) {
io.sockets.emit("todo_create", item.new_val);
}else if (!!item && !!item.new_val && !!item.old_val) {
io.sockets.emit("todo_update", item.new_val);
}else if(!!item && item.new_val == null && !!item.old_val) {
io.sockets.emit("todo_delete", item.old_val);
}
});
})
.error(function(err){
console.log("Changefeeds Failure: ", err);
});
Aurelia代码查看Socket.on
// update item
socket.on("todo_update", data => {
let pos = arrayFindObjectIndex(this.items, 'id', data.id);
if(pos >= 0) {
console.log('before update');
console.log(this.items[pos]);
this.items[pos] = data;
this.items[pos].title = this.items[pos].title + ' [updated]';
console.log('after update');
console.log(this.items[pos]);
}
});
// create item, only add the item if we don't have it already in the items list to avoid dupes
socket.on("todo_create", data => {
if (!_.some(this.items, function (p) {
return p.id === data.id;
})) {
this.items.unshift(data);
}
});
// delete item, only delete item if found in items list
socket.on("todo_delete", data => {
let pos = arrayFindObjectIndex(this.items, 'id', data.id);
if(pos >= 0) {
this.items.splice(pos, 1);
}
});
该socket.on("todo_update", ...){}不是让第二个浏览器重新渲染，但显示在控制台中的对象之前/更新确实在对象本身显示差异后。我什至更改了todo title属性，并且也不会重新渲染。
如何使用新的对象属性在第二个浏览器中重新渲染Aurelia？别太在意我，我正在同时学习Aurelia / RethinkDB / NodeJS / Socket.IO ...
Aurelia通过重写数组的mutator方法（推动，弹出，拼接，移位等）来观察数组内容的变化。这在大多数用例中都能很好地工作，并且执行得很好（没有脏检查，就内存和cpu而言非常轻便）。不幸的是，这留下了一种改变aurelia无法“看到”的数组的方式：索引赋值...例如myArray[6] = 'foo'。由于未调用任何数组方法，因此绑定系统不知道数组已更改。
在您的情况下，请尝试更改此设置：
// update item
socket.on("todo_update", data => {
let pos = arrayFindObjectIndex(this.items, 'id', data.id);
if(pos >= 0) {
console.log('before update');
console.log(this.items[pos]);
this.items[pos] = data; // <-- change this to: this.items.splice(pos, 1, data);
this.items[pos].title = this.items[pos].title + ' [updated]';
console.log('after update');
console.log(this.items[pos]);
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句