5

I'm currently using Backbone forms.

I currently have a schema which loads fine using nested models. When I try and style it with a template I don't get the expected results though.

The template is similar to the following:

<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 is defined in the schema as:

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

This displays correctly without the custom template which is being called by this:

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

and the custom template looks correct when this line is removed

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

Is there a way I can use both the custom template and a Nested Model? The Nested model has no template defined, only the has a schema added.

Thanks

Update: Js Fiddle attached the like

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

should be toggled to see a working way and it not looking correct

UPDATE:

Tommi Komulainen was very close with his answer Here , the description is actually in the first bounding div though rather than the second. How can I move this to the second ?

UPDATE 2:

Im calling the render of each nested item currently and injecting back in after the main render like this 

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

This is currently working but doesnt feel like a "good" solution

exussum
  • 18,275
  • 8
  • 32
  • 65
  • The solution in Update2 might not feel 'good', but without using a nice framework like Marionette, these are the sorts of things we sometimes have to do with backbone. – damienc88 Jun 26 '13 at 06:20

2 Answers2

2

Try adding a wrapper DIV tag around the whole of your template; templates need to have one main containing element.

evilcelery
  • 15,941
  • 8
  • 42
  • 54
  • There already is. Ill make it more visible but there is a bounding din – exussum Jun 21 '13 at 18:23
  • Its not a div, Its a
    wll that matter ?
     – exussum Jun 21 '13 at 19:26
  • That should be ok. Can you set up a jsfiddle example showing the problem you're encountering? – evilcelery Jun 21 '13 at 23:00
  • Updated original with jsfiddle example – exussum Jun 22 '13 at 04:03
  • The best approach is probably to make a custom editor for the bedrooms part of the schema. See the docs about making custom editors. – evilcelery Jun 24 '13 at 14:06
  • Also note that you're using a modified version of the list.js file, which has a mistake in it(Form.editors.List.estedModel should be Form.editors.List.NestedModel) – evilcelery Jun 24 '13 at 14:08
  • Hi yeah the mistake was there to prevent the list version of the nestedmodel. The modal window editing was un wanted. The "default" template seems to handle it OK. but the custom ones do not. The form works perfectly with the default template currently. I just want to split in to sections – exussum Jun 24 '13 at 14:36
  • Does the custom editor apply to the whole amount (eg if there are 5 bedrooms) or does it apply to each bedroom ? – exussum Jun 24 '13 at 15:05
  • You can create one that is used for each item in the list (so one for each bedroom). This will allow you to set a custom template. You'll need to set it as the value for the 'listType' in the bedroom schema. – evilcelery Jun 25 '13 at 08:03
  • Also if all you want to do is split it into sections the easier way would be to use fieldsets. See the docs - you can pass them into the form constructor and define labels for each section. – evilcelery Jun 25 '13 at 08:05
  • I want a template around each section - there are 12 sections each needing a title and some HTML around it (to be able to hide the whole section if needed) – exussum Jun 25 '13 at 08:46
  • Basically this did not solve the problem of the question right? – Simon Fakir Mar 10 '14 at 23:32
1

I think that <div data-fields="bedrooms"></div>should be

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

instead.

Tommi Komulainen
  • 2,830
  • 1
  • 19
  • 16
  • [Updated jsfiddle](http://jsfiddle.net/TvFxt/3/) looks reasonable to me. Am I missing something? – Tommi Komulainen Jun 22 '13 at 09:06
  • http://jsfiddle.net/TvFxt/2/ was the update i made - whats the difference ? Yours looks OK - but i dont understand the difference ? – exussum Jun 22 '13 at 09:17
  • I made edits also to the other data-fields to get rid of the duplication you mention. The duplication was already in the original template and the fieldsets edit fixed it for the bedrooms submodel which I thought was the root of the problem. I figured you could figure out the other fields given a direction so I didn't look at them originally, sorry about that. – Tommi Komulainen Jun 22 '13 at 09:51
  • soo close. Your example removed the other H2 to split the form into sections. So all of the example is in the first bounding box. How can i stop that ? – exussum Jun 24 '13 at 09:32