0

私はBackbone.jsがアーキテクチャの主要部分であるSPAアプリケーションを開発しています。

また、いくつかの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をエクスポートするモジュールの内部にあるため、1回だけ実行されます。Backbone.Viewで必要な動作をミックスインして、目立たない方法で疑わしいJavaScriptが挿入されるようにします。

だから私はそれらのボタンにもうボタンではないことを伝えています。私が知る限り、ChromeFirefoxとIEはそれで大丈夫です。

だまされて、ModelBinderはそのボタンをチェックボックスまたはラジオとして適切に処理し、すべてが必要に応じて機能します。

このハックがあまりにもトリッキーだと思われる場合は、経験豊富なフロントエンド開発者から話を聞くのは素晴らしいことです。

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

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

4

1 に答える 1

1

すべてのターゲットブラウザ/プラットフォームで機能する場合、そのように間違っているとは言えませんが、それは確かに珍しいことです。このアプローチにはいくつかの欠点があります。

  • 標準のhtmlではありません。typesボタンに有効なのはsubmit、、です。こちらの仕様をご覧くださいresetbutton
  • それは一般的ではないため、チーム内の他の開発者にとって誤解を招く可能性があります（あなたが一人で作業していないと仮定します）。
  • この特定のケースで機能する場合でも、次に別のプラグイン/コンポーネントを使用する必要がある場合は、このように機能するハックを見つけるのはそれほど幸運ではないかもしれません。
  • あなたの場合は問題ではないかもしれませんが、のようなセレクター$('input').something()はあなたのハッキングされたボタンを見つけられません

AFAIK、この種のシナリオを処理する通常の方法（入力要素が必要であるが、ビューでよりきれいなUI要素が必要な場合）は、ページ内で両方の要素を同期させることです-きれいなスタイルのdivと実際の入力（非表示） ）。その例をいくつか示します。Select2、ファンシーチェックボックス、ラジオボタン。より一般的であるため、これは、もう少しjsを記述する必要がある場合でも、問題に対するより良いアプローチである可能性があります。

于 2012-11-27T20:48:57.660 に答える