0

我正在开发一个 SPA 应用程序，其中 Backbone.js 是架构的主要部分。

我们也有一些 Twitter Bootstrap 风格，其中有 Button 组[1]。所以 html 有这些按钮作为复选框或单选。

为了通过使用 Backbone.ModelBinder[2] 将 Backbone 模型透明地绑定到包含这些按钮的 Backbone 视图，我修改了以下代码：

# Twitter Bootstrap compatibility
addButtonGroupModelBindingSupport = ->
    $(@el).one 'mousedown keydown', '.btn-group[data-toggle="buttons-radio"] button', ->
        $(@).closest('.btn-group').find('button').prop 'type', 'radio'

installTwitterBootstrapModelBindingSupport = ->
    backboneView = Backbone.View
    ButtonGroupModelBinderSupportView = Backbone.View.extend
        constructor: ->
            backboneView.apply @, arguments
            addButtonGroupModelBindingSupport.call @
            return

    Backbone.View = ButtonGroupModelBinderSupportView

installTwitterBootstrapModelBindingSupport()

此代码在导出 ModelBinder 的模块内部，因此只执行一次。我在 Backbone.View 中混合了我需要的行为，因此以一种不显眼的方式注入了似是而非的 JavaScript。

所以我告诉那些按钮它们不再是按钮了。据我所知，Chrome Firefox 和 IE 都可以。

被愚弄了，ModelBinder 将按钮正确地处理为复选框或单选框，并且一切都按需要工作。

如果这个 hack 看起来太棘手，那么听取更有经验的前端开发人员的意见会很棒。

[1] http://twitter.github.com/bootstrap/components.html#buttonGroups

[2] https://github.com/theironcook/Backbone.ModelBinder

4

1 回答 1

1

如果它适用于所有目标浏览器/平台，我不能说这是错误的，但它肯定是不寻常的。我看到这种方法有一些缺点：

  • 它不是标准的 html。types对按钮有效的是submit,reset和button。在此处查看规范
  • 由于它并不常见，因此可能会误导您团队中的其他开发人员（假设您不是一个人工作）。
  • 即使它适用于这种特殊情况，下次您需要使用不同的插件/组件时，您可能不会那么幸运地找到像这样工作的黑客。
  • 在您的情况下，这可能不是问题，但选择器$('input').something()不会找到您被黑的按钮

AFAIK，处理这种场景的常用方法（您需要输入元素但希望在视图中有一个更漂亮的 UI 元素）是在页面中同步两个元素- 漂亮的 div 和实际输入（不可见）。下面是一些例子：Select2、Fancy Checkboxes 和 Radio Buttons。由于它更常见，这可能是解决您的问题的更好方法，即使它需要编写更多的 js。

于 2012-11-27T20:48:57.660 回答