I'm having issues understanding how to display customized backbone-forms with Dust.js template.
The relevant part of my code are here.
// Index.jx
<head>
[...]
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/underscore.js"></script>
<script type="text/javascript" src="scripts/backbone.js"></script>
<script type="text/javascript" src="scripts/backbone-forms.js"></script>
</head>
// dashboard.dust
<div id="placeholderForm"></div
<section id="formTest">
<form>
<h1>My Title here</h1>
<div data-editor="firstname,lastname,birthday"></div>
<hr>
<p>
some info
<div data-fields="address"></div>
</p>
</form>
</section>
// DahsboardView.js
const
UserModel = require('../../models/user-model'),
_ = require('underscore');
let View = Backbone.Marionette.LayoutView.extend({
template: require('./profile-dashboard.dust'),
initialize: function () {
let self = this;
_.bindAll(this, "render");
this.model.bind('change', this.render);
this.model.fetch({ reset: true });
console.log('model', this.model);
this.profileForm = new Backbone.Form({
template: this.template,
model: this.model,
validate: true
});
/*
this.profileForm = new Backbone.Form({
model: this.model,
//template: _.template($('#formTest').html), //this.template,
validate: true
}).render();
*/
},
onRender: function() {
console.log('render init');
console.log('form', this.profileForm);
let self = this;
this.profileForm.render(); // Got problem here because template is not recognise as function or generally just not recognise as valid template
$('#placeholder').append(this.profileForm.el);
return this;
}
});
module.exports = View;
I also try to render the form after appending the elements but no luck.
$('#userInfoForm').append(this.profileForm.render()el);
Errors are every time different but mostly are coming because this.profileForm is undefined when called in render() and from my understanding this.profileForm is undefined because this.template is not valid
Any ideas how to correctly communicate with backbone-forms?
Codepen (not working but to show better the code)
don't try and get the template from the DOM.. you have dust.
also.. don't append the view manually.. backbone-form is a backbone view.. so just create it, add a region to your layout and