javascript – 绑定到表单时的骨干模型状态

前端之家收集整理的这篇文章主要介绍了javascript – 绑定到表单时的骨干模型状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在用Backbone建立一个表单,并希望在“模糊”事件中验证其字段.

挂钩的事件很简单,但我很好奇的是,模型是否应该模糊更新,还是仅在提交表单时?

更新模糊模糊

> model.set({…},{validate:true});
>如果您的模型具有多个属性,则每次都会对所有这些属性运行验证
>在创建新项目时,模型状态不是很重要,因为它可能不会与任何其他模块共享
>在编辑项目时,模型处于这个奇怪的过时/更新状态,具体取决于用户的形式.如果模型在多个模块之间共享怎么办?

更新模型提交

>不能使用model.set()进行验证,因此模型需要公开一些验证方法(例如MyModel.validZip())
在提交时,即使所有字段都已经过验证,set()需要被调用来更新模型,这将导致验证再次发生(不完全确定这是坏的)

我已经阅读了几个相关的Backbone github问题(1,2,3),而Backbone开发人员似乎在模型和表单之间画一条线.

此外,@L_403_4@插件似乎保留一个内部字段属性来跟踪表单域,完成后,调用.commit()来更新模型.

所以似乎更新提交模式是更好的方法.这是你的经验吗?

解决方法

表单中的正确UX非常棘手.过去我已尝试过两种方法.在我看来,有第三个选择:始终保持模型与您的视图的状态同步.

这个短片强调了我的一些推理:http://screencast.com/t/qukIe6XW5.

在这个视频中,我正在输入一个表单.表单自动更新以显示我输入的字符数以及允许的字符数.提供即时反馈而不是使用户从表单中删除焦点是很好的UX,找出它们有验证错误,然后回到表单.为了实现这一点,您需要能够随时了解视图的状态.

But I don’t want my model’s state to be updated automatically! The user needs to press submit first!

这听起来像是引入另一类型的模型会使你的生活变得更加容易.考虑创建一个视图模型,该模型保持对模型实例的引用.随着viewmodel的引入,您将能够将更改记录到视图中,而不会影响模型的状态.这有助于减轻恶意事件发生的风险,如果出现任何问题,服务器将能够通过服务器端验证来捕获更改并失败.

以下是我进行就地编辑的一些链接

> https://github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/foreground/view/prompt/editPlaylistPromptView.js
> https://github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/foreground/view/prompt/editPlaylistView.js

你会看到我给EditPlaylistPromptView一个EditPlaylistPrompt模型,它存储一个对要编辑的播放列表的引用.但是,在用户正在处理视图时,它不会直接修改该播放列表.一旦它通过验证,它只是更新播放列表.请注意,我没有通过验证模型,但我可以,只是在这方面的松动.

这是一个我喜欢如何可视化事物的图片.一个模型是完全正确的,应该关注一个强制分离问题的观点.但是,只有当您使用3层对象时才会这样.更灵活,引入一个称为viewmodel的新的中间层,您的生活变得更简单:

猜你在找的JavaScript相关文章