Here are some techniques we can use if we want to imitate a similar style without actually using any of them.
Delegation
Delegation in jQuery allows you to attach a handler to the children elements of a selector for the lifetime of that element. This is a super powerful feature of jQuery and not often utilized.
For anything involving adding and removing items in a list (that's a lot of use cases!), I would recommend using this to maintain event handlers.
Event bindings in templated lists is a huge benefit of KnockoutJS and AngularJS.
Note : .delegate is deprecated and you should use .on to achieve the same in newer versions of jQuery
Similar to : foreach templates and template event binding
You can view the below jsfiddle here jsfiddle.net/U3bum
For anything involving adding and removing items in a list (that's a lot of use cases!), I would recommend using this to maintain event handlers.
Event bindings in templated lists is a huge benefit of KnockoutJS and AngularJS.
Note : .delegate is deprecated and you should use .on to achieve the same in newer versions of jQuery
Similar to : foreach templates and template event binding
You can view the below jsfiddle here jsfiddle.net/U3bum
Observing variables
Observing changes in variables is a key feature of any popular MV* framework. Unfortunately, without a binding framework you won't be able to automatically update your UI.
But you can still make it so that your UI updates with the minimal amount of code and excellent separation of concerns. If you write code like this, you'll be able to have your business logic in one place and your DOM updating code in another.
How often do we run our business logic and then immediately update the same DOM element from multiple places in our code? Think about this when you look at the below example that shows you how to subscribe to changes in variables.
But you can still make it so that your UI updates with the minimal amount of code and excellent separation of concerns. If you write code like this, you'll be able to have your business logic in one place and your DOM updating code in another.
How often do we run our business logic and then immediately update the same DOM element from multiple places in our code? Think about this when you look at the below example that shows you how to subscribe to changes in variables.
Similar to : Knockout observables
Here's a jsfiddle with sourced variable watch plugin
You can view the below jsfiddle here jsfiddle.net/fbnXb/1
You can view the below jsfiddle here jsfiddle.net/fbnXb/1
Don't Embed HTML in your code; use $.clone() instead.
This will seem obvious to most, but you should keep all of your "templates" in a hidden div and then select and clone it. If you don't use a templating framework, favor the decision to leave HTML intellisense intact and templates separated from JavaScript code. You'll thank yourself later when your project is more maintainable.
If you just want a good templating framework, mustacheJS is the way to go.
If you just want a good templating framework, mustacheJS is the way to go.
Similar to : Templating (all)
Favor higher events like 'input'
Avoid events like 'keyup'. 'keyup' is an excellent way to find out if a textbox has had its value changed but you start running into edge cases like people copy-pasting into your textbox.
Handling the wrong event leads to edge cases. Binding frameworks rarely expose cruft like this except in the unusual case. The beauty of using a MV* framework is that someone with a lot more domain knowledge has thought about the usual use case, made that the default, but still allows you to have unusual behaviors with little configuration if you really need them.
Without a framework, you'll have to explore events carefully to reduce boilerplate and allow you to get to the heart of the problem you're trying to solve.
Similar to : New events exposed in binding frameworks
Other tips?
If anyone has any tips on imitating 2-way binding and templating, I'd love to hear them! A lot of projects aren't ready frameworks for a variety of reasons and I love thinking of how to solve a problem with less at my fingertips than I'm used to.
