0

これまで見たことのない非常に厄介な問題が発生しています。非常に明白な何かが欠けているのだろうか。

私はそのようなテンプレートを持っています(私はUnderscoreでコンパイルします):

<a href="#advanced-search" data-toggle="modal">
  Advanced search
</a>

<div id="advanced-search">
  <div class="modal-header">header</div>
  <div class="modal-body">
    <form id="advanced-search-form">
      // This has form elements
    </form>
  </div>
  <div class="modal-footer">footer</div>
</div>

問題は、テンプレートを使用しているバックボーン ビューを再レンダリングするたびに、フォーム要素がレンダリングされないことです! 最初のレンダリングは正常に機能します。

advanced-search-formフォーム要素内にa をネストし、フォーム要素から<div id="advanced-search-form">id を削除することで、フォーム要素をidから分離しようとしました。その結果、ネストされたdivものはレンダリングされますが、form静止画はレンダリングされません。

serializeArrayフォーム要素でのみ機能する を使用するには、フォーム要素が必要です。

回避策は、任意の要素内で入力要素をシリアル化できる関数を作成することだと思いますが、これは理想的ではなく、なぜこの奇妙なことが起こっているのかを知りたいと思っています.

ご覧いただきありがとうございます。

編集: レンダリング コード 現在、コレクションまたはモデル イベントに基づいて再レンダリングしていません。親ビューのリンクのクリック イベントを介して手動で再レンダリングをトリガーしています。以下は、私の 2 つのビュー (CoffeeScript) の基本構造です。

AdvancedSearchView = Backbone.View.extend
  template: _.template AdvancedSearchTpl   #available via requirejs      

  render: ->
    @$el.html @template() 

ParentView = Backbone.View.extend
  initialize: ->
    _.bindAll @
    $('body #refresh').livequery 'click', @refreshAdvancedSearch

  render: ->
    if !@advancedSearchElem #cache the view to save state
      @advancedSearchView = new AdvancedSearchView
      @advancedSearchElem = @advancedSearchView.render().el
    $('#content').html @advancedSearchElem

  refreshAdvancedSearch: ->
    @advancedSearchElem = @advancedSearchView.render().el  #from here, the template is rendered without the form element
    @render()

parentView = new ParentView
parentView.render()
4

1 に答える 1

0

後で<form>別のタグの内側をレンダリングしていることに気付きましformた.Chromeは内側のタグを削除することで無効なhtmlを自動的に修正したと思いますform. console.loggingテンプレートの html 出力に内部フォーム タグが含まれていたため、これはおそらく私の問題でした。

于 2013-03-26T21:30:51.010 に答える