StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>I do not want to populate the dropdown, it is already populated. I want to be able to use the client template binding syntax to get the value from my json object and set the selected element.</p> </blockquote> <p>In fact, <code>select</code> DOM elements <em>do</em> have a <code>value</code> property (but not exposed as an attribute in the markup). Setting it is equivalent to (and faster than) iterating the child <code><option></code>s and setting the <code>selectedIndex</code> to the found option index of the option that has a matching <code>value</code>.</p> <p>Anyway, here's how to bind to it directly with <code>Sys.Binding</code> (complete test case):</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">.sys-template {display:none}</style> <script src="MicrosoftAjax.debug.js"></script> <script src="MicrosoftAjaxTemplates.debug.js"></script> <script type="text/javascript"> var dataItem = { Foo: '3' }; function pageLoad() { $create(Sys.Binding, { target: $get("list"), targetProperty: 'value', source: dataItem, path: 'Foo', mode: Sys.BindingMode.twoWay }); } </script> </head> <body> <select id="list"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </body> </html> </code></pre> <p>Here is how to do the same thing declaratively, if you prefer:</p> <pre><code><body xmlns:sys="javascript:Sys" xmlns:binding="javascript:Sys.Binding" sys:activate="*"> <select id="list" sys:attach="binding" binding:target="{{ $get('list') }}" binding:targetproperty="value" binding:source="{{ dataItem }}" binding:path="Foo"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </code></pre> <p>(and of course get rid of the <code>pageLoad</code> JavaScript stuff...)</p> <p>Both examples set up two-way binding to the <code>dataItem</code> object. You can see when the page loads, the third <code><option></code> is selected as that is the option with a value matching <code>dataItem.Foo</code>. When you select a different item from the drop-down, <code>dataItem.Foo</code> updates with the new value selected.</p> <p>Hope that helps!</p>

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