Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is an option you can consider, although it does not use Breeze at all :-(, I haven't adopted breeze yet so not sure how it can aid us here.</p> <p>This sample uses a standard WebAPI controller to populate a list of timezones into a dropdown list on a knockout V/VM.</p> <p>The controller:</p> <pre><code>public class LookupController : ApiController { public IEnumerable GetTimezones() { return TimeZoneInfo.GetSystemTimeZones().Select(tz =&gt; new {tz.Id, tz.DisplayName}).ToArray(); } } </code></pre> <p>The output from the controller (sorry for the formatting, but it's basically Id, Name pairs, much like your categories list):</p> <blockquote> <p>[{ Id: "Dateline Standard Time", DisplayName: "(UTC-12:00) International Date Line West" }, { Id: "UTC-11", DisplayName: "(UTC-11:00) Co-ordinated Universal Time-11" }, { Id: "Hawaiian Standard Time", DisplayName: "(UTC-10:00) Hawaii" }, { Id: "Alaskan Standard Time", DisplayName: "(UTC-09:00) Alaska" }, { Id: "Pacific Standard Time (Mexico)", DisplayName: "(UTC-08:00) Baja California" }, { Id: "Pacific Standard Time", DisplayName: "(UTC-08:00) Pacific Time (US &amp; Canada)" }, { Id: "US Mountain Standard Time", DisplayName: "(UTC-07:00) Arizona" }, .... etc</p> </blockquote> <p>Snippet from the view model:</p> <pre><code>$.ajax({ url: '/api/lookup/timezones', context: this }).done(function(result) { // load timezones timezones(result); // timezones is a ko.observableArray // set the default time zone timezone('Eastern Standard Time'); // timezone is a ko.observable }); </code></pre> <p>The view:</p> <pre><code>&lt;select class="span6" data-bind="options: timezones, optionsText: 'DisplayName', optionsValue: 'Id', value: timezone"&gt;&lt;/select&gt; </code></pre> <p>This gives me a dropdown on my form populated by objects from the server.</p>
 

Querying!

 
Guidance

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