Trong Meteor, làm cách nào để hiển thị dữ liệu mới được chèn vào như màu xám cho đến khi nó được máy chủ xác nhận?

Question

Giả sử ứng dụng của tôi có danh sách các mục thuộc loại nào đó và người dùng có thể chèn các mục mới vào danh sách.

Những gì Meteor thường làm là: khi người dùng chèn một mục vào danh sách, nó xuất hiện ngay trong trình duyệt của họ, mà không cần chờ xác nhận máy chủ.

Điều tôi muốn là: khi một mục ở trạng thái này (được gửi nhưng chưa được máy chủ xác nhận), nó xuất hiện ở vị trí chính xác trong danh sách, nhưng chuyển sang màu xám.

Có cách nào để làm cho Meteor thực hiện việc này không?

Answer 1

Chắc chắn. Tạo một phương thức thực hiện thao tác chèn. Khi phương thức chạy, hãy kiểm tra xem nó có đang chạy trong mô phỏng hay không và nếu có, hãy đặt cờ 'tạm thời' hoặc 'chưa được xác nhận' trên mục được chèn. Sử dụng điều đó để quyết định có hiển thị mục đó thành màu xám không.

Giả sử bạn đang sử dụng MongoDB:

// Put this in a file that will be loaded on both the client and server 
Meteor.methods({ 
    add_item: function (name) { 
    Items.insert({name: name, 
        confirmed: !this.isSimulation}); 
    } 
}); 

Gọi phương pháp:

Meteor.call("add_item", "my item name"); 

Đó là tất cả bạn cần làm. Lý do hoạt động này là khi máy chủ lưu xong mục, thay đổi cục bộ (mô phỏng) trên máy khách sẽ được sao lưu và thay thế bằng bất kỳ điều gì thực sự xảy ra trên máy chủ (không bao gồm cờ 'chưa được xác nhận').

Ở trên là cách đơn giản nhất để làm điều đó, nhưng nó sẽ dẫn đến tất cả các bản ghi trong cơ sở dữ liệu của bạn có một 'xác nhận' attrbiute của sự thật. Để tránh điều này, chỉ đặt thuộc tính được xác nhận nếu thuộc tính đó sai.

Tham khảo phần này của tài liệu hướng dẫn để biết thêm thông tin về isSimulation và Meteor.methods

Answer 2

Đây là những gì tôi đã thêm một người quan sát ở phía máy chủ, tôi tạo ra một biến gọi là thông báo sai sự thật từ phía khách hàng thân khi máy chủ nhận được udpate nó sẽ làm cho thông báo đúng và khách hàng sẽ được cập nhật trên cùng.

Collection.find({"notify":false}).observe({ 
    "added" : function(first){ 
     collection.update({"_id":first._id},{$set : {"notify":true}}); 
    } 
});