Rendering and delete multiple views…
-
09-06-2021 - |
Question
I hope i am clear enough, otherwise ask me for clarifications.
I would like to delete end create view in agreement to a main template…
I did try the following implementation, unsuccessfully.
// main-template.html
<div id=""project>
<div class="main-template">
<div id="view1"></div>
<div class="foldable-block">
<div id="view2"></div>
<div id="view3"></div>
</div>
</div>
</div>
//mainView.js
define([
"js/views/view1",
"js/views/view2",
"js/views/view3",
"text!templates/main-template.html"
], function (View1, View2, View3, mainTemaplte) {
var MainView = Backbone.View.extend({
initialize: function ()
{
this.$el.html(Mustache.render(mainTemaplte));
this.render();
},
el: $("#project"),
render: function ()
{
var options = this.options;
this.view1 = new View1(options);
this.view2 = new View2(options);
this.view3 = new View3(options);
}
});
return MainView;
});
//view1.js
define([… ], function (..) {
var View1 = Backbone.View.extend({
el: $("#view1"),
initialize: function () {
console.log(this.$el) // []
setTimeout( function () {
console.log(this.$el) // []
}, 2000);
}
});
return View1;
});
The issues as you can see from the comments is in view1.js
(this.$el) // []
from my js console it works:
$("#view1") // <div>….</div>
My goals is:
1) when I load the mainView.js module I would like to create a template to which attach my views (view1, view2, view3)
2) when I trigger delete view, every DOM, to which are attached the view, should be deleted.
3) when I call again the mainView.js
module the template should be recreated.
if you have other ideas to suggest, please post.
Thanks to @nikoshr advise this.$el
, in view1.j
, is defined and when I call render in view1.js
the this.$el
is fill properly
but it is not attached to the body of document.
How can I make it without using append or similar jquery methods to my main-template.html
?
Here my render function:
render: function ()
{
this.$el.html(Mustache.render(myTemplate, this.view);
}
Solution
You are attaching your subviews to elements that do not exist at the time you require them. Something like this may be a step in the right direction:
mainView.js
define([
"js/views/view1",
"js/views/view2",
"js/views/view3",
"text!templates/main-template.html"
], function (View1, View2, View3, mainTemaplte) {
var MainView = Backbone.View.extend({
initialize: function ()
{
this.render();
},
render: function ()
{
// render from template and assign this.el to the root of the element
// e.g #project
var html=Mustache.render(mainTemaplte);
this.setElement( $(html) );
// create each view with its el set to the correct descendant
this.view1 = new View1( _.extend( {el:this.$("#view1")} , this.options) );
this.view2 = new View2( _.extend( {el:this.$("#view2")} , this.options) );
this.view3 = new View3( _.extend( {el:this.$("#view3")} , this.options) );
}
});
return MainView;
});
view1.js
define([… ], function (..) {
var View1 = Backbone.View.extend({
initialize: function () {
console.log(this.$el);
}
});
return View1;
});
And you can recreate your view with something like
require(["js/views/mainView"], function(MainView) {
var view=new MainView();
console.log(view.$el);
//attach the view to the DOM
$("body").append(view.$el);
});