5

現在、バックボーン フォームを使用しています。

現在、ネストされたモデルを使用して正常にロードされるスキーマがあります。テンプレートを使用してスタイルを設定しようとすると、期待どおりの結果が得られません。

テンプレートは次のようになります。

<div class="bounding">
  <h2>Title1 </h2>
      <div data-fields="name,type"></div>
      <div data-fields="bedrooms"></div>
  </div>
  <div class="bounding">
      <h2>Title 2</h2>
      <div data-fields="description"></div>
  </div>

ベッドルームは、スキーマで次のように定義されています。

bedrooms: {
  type: 'NestedModel',
  model:Bedroom,
  editorAttrs: {
    class: 'bedrooms'
  }
}

これは、これによって呼び出されているカスタム テンプレートなしで正しく表示されます。

template: _.template($('#formTemplate').html())

この行を削除すると、カスタム テンプレートは正しく表示されます

<div data-fields="bedrooms"></div>

カスタム テンプレートとネストされたモデルの両方を使用する方法はありますか? ネストされたモデルにはテンプレートが定義されておらず、スキーマが追加されているだけです。

ありがとう

更新: Js Fiddleが同類を添付

//  template: _.template($('#formTemplate').html()),

動作する方法を表示するには切り替える必要があり、正しく見えません

アップデート：

トミ・コムライネンは彼の答えに非常に近かったここ、説明は実際には2番目ではなく最初の境界divにあります。これを2番目に移動するにはどうすればよいですか?

更新 2:

現在、ネストされた各アイテムのレンダリングを呼び出し、このようにメインのレンダリングの後に挿入し直しています

form.fields.bedrooms.render();
$('#bedrooms').html(form.fields.bedrooms.el);

これは現在機能していますが、「良い」解決策とは思えません

4

2 に答える 2

2

テンプレート全体にラッパー DIV タグを追加してみてください。テンプレートには、メインの包含要素が 1 つ必要です。

于 2013-06-21T18:20:44.613 に答える
1

<div data-fields="bedrooms"></div>そうあるべきだと思います

<div data-fieldsets="bedrooms"></div>

代わりは。

于 2013-06-22T08:32:36.097 に答える