ऑरेलिया

Question

में बाध्यकारी पुन: मूल्यांकन या पुनः प्रतिपादन को कैसे बल देना है Iurelia, RethinkDB & सॉकेट.आईओ के साथ एक साधारण TODO ऐप से शुरू कर रहा हूं। मुझे सॉकेट.आईओ के माध्यम से बदले गए ऑब्जेक्ट को दोबारा प्रतिपादन या फिर से मूल्यांकन करने में समस्या है। तो मूल रूप से, सबकुछ पहले ब्राउज़र पर अच्छा काम करता है लेकिन कंसोल में ऑब्जेक्ट प्रदर्शित करते समय दूसरे ब्राउज़र में फिर से प्रस्तुत नहीं किया जाता है, यह मेरी ऑब्जेक्ट में अंतर दिखाता है। समस्या केवल एक ऑब्जेक्ट को अपडेट करने पर है, यह ऑब्जेक्ट बनाने/निकालने पर ऑब्जेक्ट बनाने/हटाने पर पूरी तरह से काम करती है। RethinkDB साथ

एचटीएमएल

<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 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 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", ...){} दूसरे ब्राउज़र फिर से प्रस्तुत करना नहीं कर रहा है, लेकिन दिखा देख कोड अद्यतन से पहले/बाद में कंसोल में ऑब्जेक्ट अंतर दिखाता है वस्तु में ही। मैंने टोडो शीर्षक संपत्ति भी बदल दी और वह भी पुनः प्रस्तुत नहीं किया गया।

मैं ऑरेलिया को अपने दूसरे ब्राउज़र में नए ऑब्जेक्ट गुणों के साथ फिर से प्रस्तुत करने के लिए कैसे प्राप्त कर सकता हूं? मुझ पर बहुत मुश्किल मत बनो, मैं ऑरेलिया/रेथिंक डीबी/नोडजेएस/सॉकेट.आईओ सीख रहा हूं ...

Answer 1

ऑरेलिया सरणी के म्यूटेटर विधियों को ओवरराइड करके एक सरणी की सामग्री में परिवर्तनों को देखता है (पुश , पॉप, splice, शिफ्ट, आदि)। यह अधिकांश उपयोग-मामलों के लिए अच्छी तरह से काम करता है और वास्तव में अच्छी तरह से प्रदर्शन करता है (मेमोरी और सीपीयू के मामले में कोई गंदा जांच नहीं, बहुत हल्का वजन)। दुर्भाग्यवश यह एक सरणी को म्यूट करने का एक तरीका छोड़ देता है जो ऑरेलिया "देख" नहीं सकता है: अनुक्रमित असाइनमेंट ... उदाहरण के लिए 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]); 
    } 
});