これまで見たことのない非常に厄介な問題が発生しています。非常に明白な何かが欠けているのだろうか。
私はそのようなテンプレートを持っています(私は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()