我从使用 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 变更源的 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 通过覆盖数组的修改器方法(push、pop、splice、shift 等)来观察数组内容的变化。这适用于大多数用例并且性能非常好(没有脏检查，在内存和 cpu 方面非常轻量级)。不幸的是，这留下了一种改变 aurelia 无法“看到”的数组的方法:索引赋值...例如 myArray[6] = 'foo'。由于没有调用数组方法，因此绑定(bind)系统不知道数组已更改。

在你的情况下，尝试改变这个:

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

关于javascript - 如何在 Aurelia 中强制绑定(bind)重新评估或重新渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36394399/