Bağlama yeniden değerlendirmek veya Aurelia

Question

yeniden oluşturma zorlamak Aurelia, RethinkDB & Socket.IO ile basit bir TODO uygulaması ile başlıyorum. Socket.IO aracılığıyla değiştirilen bir nesneyi yeniden oluştururken veya yeniden değerlendirirken sorun yaşıyorum. Temel olarak, her şey ilk tarayıcıda iyi çalışır, ancak konsoldaki nesneyi görüntülerken nesnemdeki farklılıkları gösterirken ikinci tarayıcıda yeniden oluşturulmaz. Sorun yalnızca bir nesneyi güncellemede, todo öğelerinin dizisinden nesne oluşturma/silme konusunda mükemmel çalışır. RethinkDB ile

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 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", ...){} yeniden işlemek ikinci tarayıcı yaparak ancak görünmüyorsa izlerken

// 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 kodu changefeeds öncesi/sonrası güncellemede konsoldaki nesne farklılıkları göstermiyor nesnenin kendisinde. Hatta todo title özelliğini değiştirdim ve bu da yeniden işlenmedi.

Aurelia'yı ikinci tarayıcımda yeni nesne özellikleriyle nasıl yeniden oluşturabilirim? üzerimde çok sert olmayın, ben Aurelia/RethinkDB/NodeJS/Socket.IO hepsi aynı zaman öğreniyorum ...

Answer 1

Aurelia dizinin mutatör yöntemlerini geçersiz kılarak bir dizinin içeriğinde değişiklik gözlemler (itme , pop, ekleme, vardiya, vb. Bu, çoğu kullanım durumu için iyi çalışır ve gerçekten iyi çalışır (kirli denetim, bellek ve işlemci açısından son derece hafif değildir). Ne yazık ki bu, aurelia'nın "görmediği" bir dizi mutasyona uğratmanın bir yolunu bırakır: endeksli ödev ... ör. myArray[6] = 'foo'. Hiçbir dizi yöntemi çağrılmadığından, bağlama sistemi dizinin değiştiğini bilmiyor. Bilmek istediğim ve değişikliklerden yerde ... o belgedir kirli kontrol dışına kalır tam olarak ne

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