Como forçar a reavaliação ou re-renderização em Aurelia
Estou começando com um aplicativo TODO simples com Aurelia, RethinkDB e Socket.IO. Parece que tenho problemas com a renderização ou reavaliação de um objeto que é alterado pelo Socket.IO. Então, basicamente, tudo funciona bem no primeiro navegador, mas não é renderizado novamente no segundo navegador, enquanto a exibição do objeto no console mostra diferenças no meu objeto. O problema está apenas na atualização de um objeto, ele funciona perfeitamente na criação / exclusão de objetos da matriz de itens de tarefas.
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>
NodeJS com feeds de mudança do RethinkDB
// 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);
});
Código Aurelia assistindo 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);
}
});
osocket.on("todo_update", ...){}
não está fazendo a segunda renderização do segundo navegador, mas mostra o objeto no console antes / depois da atualização mostra diferenças no próprio objeto. Eu até mudei a propriedade todo title e isso também não é renderizado novamente.
Como posso obter o Aurelia para renderizar novamente no meu segundo navegador com as novas propriedades do objeto? Não seja muito duro comigo, estou aprendendo Aurelia / RethinkDB / NodeJS / Socket.IO ao mesmo tempo ...