use templates but keep jquery bindings? - javascript

I currently have a LARGE single-page application, with each html "view" being built purely with jQuery DOM creation/manipulation. The javascript files are ridiculously large, and adding or changing a view is a very complex process. I started thinking about using backbone.js and templating. However, if I use templating, will I lose the ability to bind jQuery events and data to elements?

No, you can still apply all your jQuery magic to your resulting DOM elements. Templating will simplify the process of creating DOM elements, but the result is the same and can be used identically.

Why would you lose any capability if you are using templates with jQuery? You can instantiate elements via templates, and bind away as you always have - at template time or via preset .live() handlers.
Although I would take a look to make sure Backbone.Router doesn't give you a more elegant way to handle your interactions.

If performance is a bottleneck issue, inline your events in your template.
<input type="button" onclick="doit(this);">

Related

Shared custom element creation performance

The Polymer documentation suggests using a custom element for sharing some static data, like configuration. Something like <app-settings>.
I'm wondering whether it is optimal from performance point of view. Whenever such non-visual element is used it has to be created nonetheless. Wouldn't it be better to simply share the settings in a global variable or in a form of a (AMD/requirejs) module?
The same goes for purely functional tags like <iron-ajax>. If I place many of the inside my custom elements wouldn't it affect performance as opposed to simply using some existing XHR library?
No it's not optimal from a performance point of view.
Custom Elements are slowly created (and is even slower with polyfill).
I think a non-visual object gains nothing to be a Custom Element.
You're right, a simple object would do the job better. Don't get polymerized :-)
http://jsperf.com/new-vs-create-element/3

JS templating engine that preserves elements

I have the following problem:
A have a web application where I regularly need to update the user interface when data changes. The data consists of a list of items with different attributes. Because the UI representations of these items can be complex, I use JS templating to render them. When they change I just replace them in the DOM with the HTML representing their updated state.
This approach is simple but has several problems:
you need to re-attach all event handlers because you practically replace elements
there is a flickering effect when reloading resources (probably can be solved using document fragments)
it's impossible to work with developer tools (inspector) if the content changes frequently because, again, all the elements are replaced
So I was wondering if there is any JS templating engine of that many that can deal with the situation. I'm thinking of a feature that intelligently matches elements of the new render and an old one and only changes the content when it has really changed.
I'm thinking of something like this:
Old HTML
<div>
<h1>TV</h1>
<span>$250</span>
Add to cart
</div>
New HTML
<div>
<h1>TV</h1>
<span>$260</span>
Add to cart
</div>
The templating engine find the <span> in the original DOM and replaces its changed value but leaves the rest of the elements intact.
Finally I came across Rivets.js which a lightweight, highly extensible JavaScript templating engine with real time data binding. I love it so far, it's exactly what I needed.
you can try the AngularJS
A simple example:http://jsbin.com/opayuf/4/edit
you can check out these examples if they can meet your requirements
http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
HandleBarsJs may be the one you need, you could see the discussion on
Handlebars.js: Use a partial like it was a normal, full template
You can also try Ember js based on HandlerBarsJs, you can check is out
http://emberjs.com/guides/templates/handlebars-basics/
http://emberjs.com/guides/templates/rendering-with-helpers/

Reasonable approaches to use bootstrap and angularjs together without depending on jquery

Right now, I am taking a look at Angularjs after spending sometime playing with twitter's bootstrap. I really like bootstrap because it's easy, sleek and very mobile-friendly. Now for angularjs, I see people recommending it instead of Jquery and going as far as in saying that, DO NOT USE JQUERY AT ALL and do everything on angularjs.
This question and answers helped to shape some of my beliefs and why I should move to angularjs than jquery.
How do I “think in AngularJS” if I have a jQuery background?
Accepted answer to this question ( which is very well-detailed!) goes like this on its overall summary:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Even the FAQs from angularjs website says not to use it Angularjs FAQs.
DOM Manipulation
Stop trying to use jQuery to modify the DOM in
controllers. Really. That includes adding elements, removing elements,
retrieving their contents, showing and hiding them. Use built-in
directives, or write your own where necessary, to do your DOM
manipulation. See below about duplicating functionality.
If you're struggling to break the habit, consider removing jQuery from
your app. Really. Angular has the $http service and powerful
directives that make it almost always unnecessary. Angular's bundled
jQLite has a handful of the features most commonly used in writing
Angular directives, especially binding to events.
The concept of angularjs seems tempting. In fact, who would not like abstracting away DOM manipulation logic? However, bootstrap makes it so much easy when you are designing web-pages but since bootstrap uses jquery, bootstrap and angularjs together means that the code and overall web-page is still dependent on jquery. Is this mixer completely undesirable? If so then, what is the best way to keep hanging to bootstrap while using angularjs? Simply saying, I don't care so much about jquery but I like bootstrap.
I might be talking in circles here so I will try to reword what I am saying in a single sentence.
What is the best way to use angularjs and bootstrap together without creating spaghetti code where one place is so jquery-based and next angularjs-based?Or is the idea of using bootstrap and angularjs together is conceptually against what angularjs was meant for?
When trying to integrate jQuery things in to Angular, the best approach is to wrap it in a directive. This is what Angular-Strap originally did, but the recent version upgrade to 2.0 completely removed those dependencies and does it all in Angular (and it is a much better product for having done so.) This is the same method that Angular-UI took from day 1 and that continues today.
When you do something like this, the biggest hurdle is trying to keep things "Angular-ized" when working with the DOM. The examples that both Angular-Strap and Angular-UI can provide if you look at the underlying code are very good and should give you the right direction.

Bind javascript events to MVC controls

What is the best way to bind Javascript events to my custom MVC controls? My initial thought is to create the controls using Html Helpers which give them a CSS class that signifies what kind of control they are. Then, on document.ready, I'll use jQuery to select all such controls by their class name and bind their events.
However, I'm concerned about the speed of selecting from the entire dom by class name. I've read (and experienced) how slow this can be, especially in IE8 which we need to target for this project.
I could select by IDs by creating a js file for each page, but I'd rather not do this, as it's a complicated web app with lots of pages. I'd rather have one js file for each type of control that gets included in a view if the view contains at least one of that type of control.
Are CSS classes my best option? Any other ideas? I'm using MVC3.
My advice would be to try it out with classes and test the performance. If you are not satisfied, switch to IDs. I use class selectors all the time and don't find them terribly slow in any browser. When you give jquery a context to search in, things are quite fast. For example:
$('#controls .control').whatever();
Or
$('.control', '#controls').whatever();
Sizzle is great at optimizing these things to be fast.
Edit: Here is a good reference for jQuery performance tips in general (notice #5):
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

attaching behavior to elements created by knockoutjs

Take, for example, the situation using knockoutjs:
<div id="container" data-bind="foreach:containers">
<li class="complex-element">...</li>
</div>
Now I want to attach some complex behavior to complex-element. How do I do that? I can't just attach events directly to complex-element, as they're created and removed dynamically at runtime to match the view model. So, as I see it:
I can riddle my html with data-bind="click:..."s and data-bind="mouseenter:..."s but I would rather avoid this if I could. Maybe I'm too rooted in my old MVC ways, but adding open(), select(), or dragStart() functions and isOpen, isSelected or isDragging observable flags to my view model just makes a mess and my intuition tells me that as the app gets bigger that view model is going to become unmanageable. I'd rather keep my data and my presentation separate if possible.
Or I can use jquery delegation to attach events to something that stays fixed. Something like:
$("#container").on('click', '.complex-element button.open', function(e) {
var elem = $(e.target).parents('.complex-element');
...
});
But this wouldn't work as the app gets more complex because what happens if the container is itself wrapped in an element only shown on login (<div id="wrapper" data-bind="if:isLoggedIn">...</div>). I might as well just bind all events to the body and that's a recipe for disaster.
I found a very cool article on knockmeout.net (http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html) that advocates using custom knockout bindings to drive complex behavior, and this seems to be an awesome solution for widget-like behaviors like autocompletes or date-pickers, but what about just simple old fashioned controllers... would this work?
I guess, after all that, my question is pretty simple: Has anyone used Knockoutjs on a really large web application? And how did you go about it?
You could use a different jquery bind:
$(document).on('click', '#container>.complex-element button.open', function(e) {
var elem = $(e.target).parents('.complex-element');
...
});
This would work if #container does not exist.
There is some work going on in the community to make the knockout bindings unobtrusive and easy to write. For now, knockout offers you dataFor() which can be seen here: Using unobtrusive event handlers or you can use a little library like this: Introducing the Knockout.Unobtrusive Plugin
If you need to execute some arbitrary js on some rendered elements from the foreach you could use the afterAdd callback
<div id="container" data-bind="foreach: { data: containers,
afterAdd: somefunction }">
<li class="complex-element">...</li>
</div>
I have used KO on a really large web app and the way I went about managing complexity was
Split out viewmodels into separate using namespaces within a single master namespace.
Write custom bindings for complex reusable behavior.
Created entity model classes that encapsulated most of the important business logic, akin to backbone models.
Ensured that the viewModels were entirely view specific and view related (helped by point 3)
Kept all jquery selectors to a bare minimum, I feel dirty writing any global delegates but sometimes they are needed.
Hope this helps.

Categories