How to use nested models with Backbone Forms List? I want to make a nested model with custom template

Question

How do I use nested models with Backbone Forms List? I want to make a nested model with a custom template, but this is giving an error: "Render of undefined"

I want to make a view by backbone-forms with a custom template. The template is

<div class="container-fluid add-apikey" data-class="add-apikey">
<div class="page-head">
    <h2>API Key</h2>
</div>
<div class="cl-mcont">
    <div class="row">

        <div class="col-sm-12">
            <!-- New Zone -->

            <div class="block-flat">
                <form class="form-horizontal" role="form">
                    <div class="header">
                        <h3>Create New API Key</h3>
                    </div>
                    <div class="content">
                        <div class="formAlerts"></div>
                        <div class="formconfirm"></div>
                        <div class="required" data-fields="apiName">

                        </div>

                        <div class="required" data-fields="notes">

                        </div>

                        <div class="required" data-fields="weapons">

                        </div>
                        <div class="form-group editmode">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button class="btn btn-primary readOnlySave" type="button">Generate Key</button>
                                <button class="btn btn-default readOnlyCancel">Cancel</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <!-- end new zone -->

    </div>
</div>

and the js is

//Add api keys
var //util
    util = require('./../../../util/util.js'),
    apiKeyAddTpl = require('./../templates/apikeyadd.hbs'),
    backboneFormList = require('backboneFormsList'),
    backboneFormsModal = require('backboneFormsModal');

module.exports = Backbone.Form.extend({

    template: apiKeyAddTpl,

    schema: {
        apiName: {
            type: 'Text',
            fieldClass: "field-apiName form-group",
            editorClass: "form-control editmode"
        },
        notes: {
            type: 'List',
            fieldClass: "field-notes form-group",
            editorClass: "form-control editmode"
        },
        weapons: {
            type: 'List',
            itemType: 'Object',
            fieldClass: "field-weapon form-group",
            editorClass: "form-control editmode",
            subSchema: {
                id: 'Number',
                name: {
                    type: 'Text'
                }
            }
        }
    }

});

But this is giving me an error when I want to add a field under weapons. The error is : Cannot read property 'render' of undefined.

Answer 1

You need to extend a View: Backbone.View.extend. This view have a el attribute. You must you must associate this attribute with the form. And the views have a method render that you can override. Doc: backbone view