StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>jQuery template doesn't actually implement two-way data binding, but another Microsoft developed jQuery plugin does. This <a href="http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx" rel="noreferrer">Scott Guthrie post</a> actually covers both the tmpl plug in and Data Linking plugin. Scroll down to "Support for Client Data-Linking" where Scott goes into detail on how the Data Linking plug in works.</p> <p>However, for two way data binding, i find the <a href="http://knockoutjs.com/" rel="noreferrer">knockoutjs</a> extension to be much better and cleaner. The <a href="http://knockoutjs.com/documentation/introduction.html" rel="noreferrer">declarative</a> syntax keeps the markup clean and the <a href="http://knockoutjs.com/documentation/custom-bindings.html" rel="noreferrer">custom data binding overrides</a> allow for a multitude of applications. Finally the <a href="http://knockoutjs.com/documentation/plugins.mapping.html" rel="noreferrer">mapping plugin</a> is pretty great for processing JSON from the server into binding. Finally knockoutjs also has <a href="http://knockoutjs.com/documentation/template-binding.html" rel="noreferrer">bindings based on tmpl plugin</a> as well. </p> <p>Good luck with your problem.</p> <h2>EDIT: updated Code Example</h2> <p>Scrips required:</p> <pre><code><script src="/Scripts/jquery-1.5.0.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.tmpl.js" type="text/javascript"></script> <script src="/Scripts/knockout.js" type="text/javascript"></script> <script src="/Scripts/knockout.mapping.js" type="text/javascript"></script> </code></pre> <p>Then here is the meat and potatoes </p> <pre><code> <div data-bind='template: { name: "tmplTest", foreach: viewModel.list }'> </div>  <script type='text/html' id='tmplTest'> <div> <span data-bind='text: textvalue, uniqueName: true'></span> <input data-bind='value: textvalue, uniqueName: true, valueUpdate:"afterkeydown"'/> </div> </script> <script type='text/javascript'> var viewModel = ko.mapping.fromJS( { list:[ { textvalue: "text1" }, { textvalue: "text2"} ] }); $(function() { ko.applyBindings(viewModel); }); </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload