So I am pulling in a template in the render() method in BackBone.
var html = $(template).render();
this.el.html(html);
I have some css defined for that template, for instance a percent width on an element. I can't seem to get that height using jquery after the lines above. So does that actually render that to DOM, when do elements get calculated?
Thx
Ralph
First, you need to use the jquery cached element this.$el.html(html).
After this the view it's already rendered, but not attached to the DOM, hence, properties like height or width will be undefined (or zero).
For example, this should return something:
var html = $(template).render();
this.$el.html(html);
this.$el.appendTo("body");
console.log(this.$el.height());
Related
I'm trying to integrate the Select2 widget with Backbone Marionette views. My simple setup uses a Marionette.CollectionView to create and handle the select tag and Marionette.ItemViews to render the option tags.
That basically looks like this:
SelectCollectionView = Backbone.Marionette.CollectionView.extend({
itemView : SelectItemView,
tagName : "select",
onRender : function() {
this.$el.select2();
},
onClose : function() {
this.$el.select2("destroy");
}
}
SelectItemView = Backbone.Marionette.ItemView.extend({
tagName : "option",
render : function() {
// create the needed option tags
}
}
As you can see, I have to call the Select2 initialize and destroy methods upon render and close to have the needed additional tags added to the DOM.
This setup works very well, as long as the view handling the select tag (SelectCollectionView) has already been added to the DOM. If that is not the case, Select2's additional tags get lost, as they are not part of SelectCollectionView's $el and thus not added to the DOM.
I wonder how to elegantly solve this? One could add an extra div container and render everything inside it, but that would produce extra code for the script and the DOM. It also makes my view less versatile. I just hope for a better solution I didn't think of.
As you suspect, you are going to need a containing div to surround your template. Fortunately, this is really simple. Instead of what you currently have:
SelectCollectionView = Backbone.Marionette.CollectionView.extend({
tagName : "select"
Get rid of tagName, and in your template (I'm assuming you use Handlebars or Underscore or something like that), define your HTML:
template.html
<select class="whatever-you-want"></select>
Then in your view:
SelectCollectionView.js
SelectCollectionView = Backbone.Marionette.CollectionView.extend({
template: _.template(templateHtml)
Marionette will automatically wrap a div around your <select>, and then all of the extra markup that select2 adds will be safely contained within the view's $el.
It took me some time to figure it out, but I used to solve it this way:
var Select2View = Mn.View.extend({
template: _.template('<select class="form-control"><option></option></select>'),
onRender:function() {
this.$el.find('select').select2();
}
});
The important part here is
this.$el.find('select').select2();
which select the select tag, inside the element. But I don't use collection view in my example. If you need to fetch data you can use:
this.$el.find('select').select2({data: ['1','2','3','4']});
Also select2 provide very good API for manipulating select items during runtime.
I have a view, which holds handlebars template.
that template consist of another partial template.
that partial template holds a list of results, which i am using in different parts of my app.
anyhow, when trying to filter the results, i'd like to render only that part. meaning the backbone view should not render the whole view just the partial.
can it be done?
Yes, it's possible. The easiest way is to execute the whole template as you do when rendering the complete view, but only replace the the part you need in the view's el.
Something like:
template: Handlebars.compile(templateHtml),
render: function() {
//let's say your render looks something like this
this.$el.html(this.template(this.model.toJSON());
},
renderList: function() {
var html = this.template(this.model.toJSON());
var selector = "#list";
//replace only the contents of the #list element
this.$el.find(selector).replaceWith($(selector, html));
}
Depending on how dynamic your template is, you may have to call this.delegateEvents() after replacing the list for the view's events to work correctly.
Edit based on comments:
To clarify, the method I propose here does execute the view's main handlebars template again, but it doesn't render the whole view again.
Step by step:
Execute the Handlebars template function as you do in normal render.
var html = this.template(this.model.toJSON());
The variable html now contains a string of HTML markup. Nothing has yet been rendered.
Define a selector for the element, which you would like to re-render.
var selector = "#list";
Find the DOM element to replace. This presumes that you have already rendered the view once. Otherwise there will be no #list element within this.$el.
this.$el.find(selector)
Find the corresponding element in the templated html string, and replace the existing element with the new one:
.replaceWith($(selector, html));
This will only replace the #list element that's currently on the page. Anything outside #list will not be re-rendered or touched in any way.
The main reason I propose you do it this way instead of executing and rendering the partial template separately is that your view doesn't need to know anything about the implementation details of the template and the templating engine. All it needs to know that there is an element #list. I believe this is a cleaner solution, and keeps your template details separate from your view logic.
I have created a Backbone.js/Require.js application that dynamically loads HTML templates to use as "pages" in the application. This means my main HTML page looks like so.
<head>
// Necessary CSS and Javascripts here
</head>
<body>
<div id="container"></div>
</body>
And then I used underscore templates to render new elements dynamically to the DOM. However, a new feature requires the use of a Raphael.js chart. I created a new element <div id='canvas'></div> and call Raphael('canvas') but since the canvas element wasn't there on DOM ready, Raphael can't see the newly created element.
I have attempted to use a jQuery selector in place of the id reference like so Raphael($('#canvas')) but this attaches the canvas to the body element and not my container element.
Any suggestions on how to bind a Raphael canvas to a dynamically created element?
Raphael($('#canvas').first(), '100%', '100%')
Though I had errors else where, the main issue that caused Raphael not to fire was forgetting that a jQuery selector passes an array of Elements and Raphael's constructor want's a single element. Raphael was attaching itself to the body because it was the top level parent of the selector's result.
Mosselman was also correct in pointing out that you can build a view in Backbone entirely in memory and then append it to the DOM.
A way to overcome this issue is by creating an empty element in the view and binding everything onto that. I have never worked with Raphael, but I think this could work:
var someView = Backbone.View.extend({
el: document.createElement('div'), // This creates a DOM element '<div></div>'
initialize: function(){
Raphael(this.el); // Attach Raphael, you could also go with jQuery
},
render: function(){
jQuery('#container').append(this.el); // Add to DOM somehow
}
})
seems like a good approach is to either throw an event after the template has been added to the DOM and have your call to Raphael('canvas') listen for that event or use a callback to trigger Raphael('canvas'). in both cases you are ensuring that you don't call Raphael('canvas') before the target element is in place.
very roughly, something like this:
//from your raphael module / code
$(document).on('canvasAdded', function(){
var paper = Raphael('canvas');
//stuff!
});
//after you are sure your template has rendered
$(document).trigger('canvasAdded');
you probably want to make some kind of .init() method and call that from the event handler (vs. what I show above) but hopefully this points you in the right direction.
I know that this is too old question, but anyway it can help to someone. Its important to be sure that your view is placed on page, so use something like onShow functionality, or render. But anyway Raphael will not show right because if your send to Raphael this.$el or anything similar it will not accept it like you expect. What You need to do is something like this.$el.first() or this.$el[0].
I have a simple backbone.js app. I want to render a view into the DOM of the HTML page, this view is a detail view for a model. My HTML page already has the DIV element that I want to render the view into. If I try to render my view like this:
detailView = new RulesPanelView({model : #model})
$("#detail").html(detailView.render().el)
It fails and I get [Object HTMLDivElement] inserted into the DOM, not my rendered HTML.
This is the only way I can get it to work and it seems like a hack:
$("#detail").html('')
detailView = new RulesPanelView({model : #model})
$("#detail").append(detailView.render().el)
Having to empty the HTML of the DIV before rendering so I don't get multiple views rendered inside #detail which is what would happend with append.
Also aren't I creating way too many views this way, just seems cleaner to replace the HTML as in the first code segment?
What is the correct way to render this view?
What you want is to pass the already inserted DOM node to the view as a 'el' option to the constructor:
new RulesPanelView({el: $("#detail")});
This way, it won't render again. You still need to make sure your view's 'render' method will be able to render a correct view from an updated model, though.
The backbone documentation mentions this as a good way to avoid rendering too much stuff at once.
I actually append in the render method of the view. This doesn't work if you want to re-render when models change - but for that I've added a refresh method that render actually calls before appending. I then bind the refresh to the model change (if I need that). So in my View, I do this:
render: function(){
var markup = this.refresh();
$(markup).appendTo('#some-selector');
return this;
},
refresh: function(){
return $(this.el).html($.mustache(this.template, this.model.toJSON()));
},
Not sure if that's the "best", but I think it works pretty well. I've also seen where you have a collection bound to a view that loops through all of the models and renders "sub-views" of the collection view - this provides a nicer programmatic approach than hard-coding where you're going to append.
I have a ExtJS page that is outputting the following DOM.
I want to select a specific element so that I can respond to a click on it.
However, the following code never selected the elements that are built with the extJS library. JQuery can't seem to select them either.
ExtJS can't even find an element that is defined in the <body> element in the HTML file itself. However, JQuery can indeed select an element defined in the <body> element.
I have been reading this guide which seems to indicate it should be no problem to just use Ext.get() and Ext.select() to get elements, however, as the following code shows, the elements are never selected.
How do I select an element in ExtJS?
var members = Ext.select('x-panel');
for (var i = members.length - 1; i >= 0; i--){
element = members[i];
element.on('click', function() { alert('test');})
};
Try Ext.select('.x-panel') with a period in the selector, which is required for selecting by class name.
bmoeskau is right, you can use Ext.select('.x-panel') which returns a collection of divs with class x-panel.
Note that Ext.get() just returns a single element, so if you want to get multiple matches you should use Ext.select() or Ext.query().
And what's more, Ext.select() returns Ext.CompositeElement, though the document does not list but it supports all the methods of Ext.Element so your example can be simply written as:
Ext.select('.x-panel').on('click', function(){ alert('test') });
Code above will add event handler for click operation to each x-panel.
Use:
Ext.get(el);
if you need to get the flyweight element, use:
Ext.fly(el);
See the API documentation for the Static Ext object for details