Ich beginne mit einer einfachen TODO-App mit Aurelia, RethinkDB & Socket.IO. Ich habe anscheinend Probleme beim erneuten Rendern oder Auswerten eines Objekts, das über Socket.IO geändert wurde. Im Grunde funktioniert alles im ersten Browser, wird aber im zweiten Browser nicht neu gerendert, während die Anzeige des Objekts in der Konsole Unterschiede in meinem Objekt anzeigt. Das Problem besteht nur beim Aktualisieren eines Objekts. Es funktioniert perfekt beim Erstellen / Löschen eines Objekts aus dem Array von Aufgabenelementen.

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 mit RethinkDB changefeeds

// 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 Code beobachten 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);
  }
});

Dassocket.on("todo_update", ...){} rendert den zweiten Browser nicht neu, zeigt jedoch das Objekt in der Konsole an, bevor / nachdem die Aktualisierung durchgeführt wurde, und zeigt Unterschiede im Objekt an. Ich habe sogar die Eigenschaft todo title geändert und auch diese wird nicht neu gerendert.

Wie kann ich Aurelia dazu bringen, in meinem zweiten Browser mit den neuen Objekteigenschaften neu zu rendern? Sei nicht zu hart mit mir, ich lerne immer wieder Aurelia / RethinkDB / NodeJS / Socket.IO ...