2014-10-31 26 views
0

首先 - 我有一個很難制定了這個問題,所以請多多包涵,並要求澄清,我會盡力提供儘可能多的,我可以。我剛開始學習流星,請耐心等待。輸入保存爲您鍵入集合 - 如何更新UI?

我有幾個輸入,立即保存爲人們輸入他們。 (稍微延遲300毫秒以不超載數據庫)。

基本上,在 「KEYUP」 時,流程和節省。所有的工作正常。但是,當數據庫實際存儲他們輸入的內容時,我想添加一個可視指示器(例如綠色複選標記或小「已保存」)。

圖形:

[___________________]

[類型化something_____(保存

[___________________]

我不知道如何去這一點,但它的東西常見的,你已經做了很多。如果我不關心數據庫反饋,我只需使用JQuery,在輸入旁邊定位一個類,並在關鍵點後使複選標記或單詞可見,或者將其添加到DOM。相當直截了當,只有當我確信已將它存儲在Mongodb部分時,纔會讓我感到困惑。

任何幫助將欣然讚賞。 謝謝你的代碼

附錄:

Template.dibs.events({ 

'keyup input.name': _.throttle(function(event) { 
    Dibs.update(this._id, {$set: {name: event.target.value}}); 
    $(':focus + .glyphicon-ok').css('opacity',1); 
}, 300), 

你能解釋一下這裏的/你會怎麼添加代碼? (對於微調,或單詞)。 來自JQuery我做了一些我知道不正確的方法。這是在客戶端部分(我知道只是演示代碼,並不安全),但我想知道利用流星來做到這一點的最佳方式。我已經有複選標記,說明它已保存在頁面中,但它們全部隱藏,此代碼只是使它們在該字段的關鍵字中可見。

我通過這篇文章,並沒有很明白我怎麼會去這樣做的中間步驟(旋轉器等),那麼代碼後,即可完成複選標記保存。我也正在瀏覽新的1.0教程(這很棒),但我仍然缺少視覺指示器。這是偉大的流星更新UI,如果它在服務器出現故障,以反映它沒有保存,因爲我假設成功,我不認爲進入割膠Meteor.Error是有道理的。應該沒有Meteor.Success或類似的東西?

同樣,我的長消息道歉,我想總結我解決這個的頭,因爲這項技術看起來非常有前途

回答

0

歡迎流星!事實上,流星設計(除其他外)通過稱爲延遲補償的機制來處理這種類型的情況。你可以在Meteor.methods上閱讀更多關於它的信息。

在服務器上調用方法需要在網絡上進行往返。如果用戶由於這種延遲而必須等待整整一秒才能看到他們的評論出現,那將是非常令人沮喪的。這就是爲什麼流星有一個名爲方法存根的功能。如果您在客戶端上定義了一個與服務器方法同名的方法,Meteor將運行它來嘗試預測服務器方法的結果。當服務器上的代碼實際完成時,客戶端上生成的預測將替換爲服務器方法的實際結果。

您可以使用延遲補償通過定義一個流星方法輸入的文本保存到數據庫中,與客戶存根顯示,而不是「救」微調框和「保存」,當其回調調用成功。

或者,您可以直接調用集合上的update method,並在客戶端添加回調,在服務器方法返回後將使用(error, numberOfDocsUpdated)調用該回調。

瞭解更多關於when to use Meteor methods and when to use client-side operations

+0

感謝您的及時回覆,我會在週末閱讀這篇文章。方法存根似乎是我想要的。我會將答案標記爲接受。 – Mauricio 2014-10-31 23:54:58

0

正如丹所說,延遲補償需要照顧需要這樣做。另一種做法是在模板事件中。您可以使用文本字段的內容和幫助程序在關鍵字上設置會話變量,設置一個標誌,以便在會話變量和當前用戶輸入匹配時顯示覆選標記。