2014-10-31 51 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

正如丹所说,延迟补偿需要照顾需要这样做。另一种做法是在模板事件中。您可以使用文本字段的内容和帮助程序在关键字上设置会话变量,设置一个标志,以便在会话变量和当前用户输入匹配时显示复选标记。