web-dev-qa-db-ja.com

Backbone.jsビューとしてbootstrap-modalを使用する

Twitterのブートストラップモーダルに基づいてBackbone.jsビューを作成しようとしています。これは、ビューのevents属性を介したBackboneの自動イベント委任を利用します。

残念ながら、bootstrap-modalは、モーダルを表示する前にビューHTMLのクローンを作成するため、Backboneのイベント委任を壊すようです。

that.$element
      .appendTo(document.body)
      .show()

私の見解：

App.Views.ProjectsNav ||= {}

class App.Views.ProjectsNav.NewProjectView extends Backbone.View
  events: {
    'click .save': 'save',
    'shown':       'shown'
  }

  save: (e) ->
    ...
    false

  shown: () ->
    App.Helpers.Forms.setFocus($(@el), true)
    false

  render: () ->
    $(@el).html(ich.nav_edit_project_template(@model.toJSON()))
    @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true})
    @

対応する（口ひげ）HTMLテンプレート：

<div class="modal hide" style="display: none; ">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>New Project</h3>
  </div>
  <div class="modal-body form-stacked">
    <label for="name">Name</label> <input type="text" name="name" value="{{name}}"/><input type="hidden" name="lock_version" value="{{lock_version}}"/>
  </div>
  <div class="modal-footer">
    <a href="javascript:void(0)" class="save btn primary">Create</a>
    <a href="javascript:void(0)" class="cancel btn secondary">Cancel</a>
  </div>
</div>

それぞれのイベントがトリガーされたときに、saveもshownも呼び出されません。

何か案は？

javascriptbackbone.jscoffeescripttwitter-bootstrap
31
Thilo-Alexander Ginkel

さて、解決策はかなり単純でした：

_App.Views.ProjectsNav ||= {}

class App.Views.ProjectsNav.NewProjectView extends Backbone.View
  tagName: 'div'

  events: {
    'click .save':   'save',
    'click .cancel': 'hide',
    'hidden':        'hidden',
    'shown':         'shown'
  }

  initialize: (options) ->
    super(options)
    @collection = options.collection

  hide: () ->
    @el.modal(true).hide()
    false

  save: (e) ->
    ...
    @model.save(attrs, {
      success: (project) =>
        @model = project
        @collection.add(@model)
        @hide()
      error: (project) =>
        alert('Something went wrong: ' + project)
      }
    )
    false

  render: () ->
    @el = ich.nav_edit_project_template(@model.toJSON()).modal('keyboard': true, 'backdrop': true)
    @delegateEvents()
    @el.modal('show': true)
    @

  hidden: () ->
    @remove()
    false

  shown: () ->
    App.Helpers.Forms.setFocus($(@el), true)
    false
_

要約すると、重要なのは、モーダルの表示を2つのステップに分割して、_@el_を割り当て、後で@delegateEvents()を呼び出してから表示できるようにすることです。 @el.modal(true)を使用して、モーダルを制御するオブジェクトにアクセスできます。たとえば、プログラムでオブジェクトを非表示にすることができます。

17
Thilo-Alexander Ginkel