Databases
StackOverflow2013
Postsdbo
POHow to use observables in Durandal?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use observables in Durandal?
    primarykey
    data
    text
    <p>I am fairly new to Durandal. I have a little experience with KnockoutJS. I am trying to populate an observableArray from json retrieved from a php file. I am then trying to load the array into a table. There seems to be an issue when loading the data into the table upon first load of the page. I perform a system.log(customers) just to make sure the data is in the observableArray, which it is. When I refresh the page, the data is loaded into the table like I want it to. It appears as if the observableArray is getting populated, but the view is not updating.</p> <p>I was wondering what I am doing wrong for it to not load on the first load of the page. Here is the test site I've been playing with durandal: <a href="http://dev.codeplanetapps.com/spa/" rel="noreferrer">http://dev.codeplanetapps.com/spa/</a>. Once it loads, click on "Customers." The page in question is <a href="http://dev.codeplanetapps.com/spa/#/customers" rel="noreferrer">http://dev.codeplanetapps.com/spa/#/customers</a>. When that page is loaded directly, it works fine, but when I load the app from the main page and then switch to customers, it doesn't load the table correctly. Thanks in advance for any help.</p> <p>Here is the view:</p> <pre><code>&lt;div&gt; &lt;!-- Form to add new customer --&gt; &lt;form class="form-inline customerForm"&gt; &lt;span&gt;Add New Customer&lt;/span&gt; &lt;input type="text" data-bind="value: inputName" placeholder="Name" /&gt; &lt;input type="text" class="date input-small" data-bind="value: inputDOB" placeholder="Date of Birth" /&gt; &lt;input type="text" class="input-small" data-bind="value: inputPhone" placeholder="Phone" /&gt; &lt;input type="text" data-bind="value: inputEmail" placeholder="Email" /&gt; &lt;button type="submit" class="btn btn-primary" data-bind="click: submitCustomer"&gt;Add&lt;/button&gt; &lt;/form&gt; &lt;table class="table table-hover table-bordered customerTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;DOB&lt;/th&gt; &lt;th&gt;Phone Number&lt;/th&gt; &lt;th&gt;Email&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody data-bind="foreach: customers"&gt; &lt;tr&gt; &lt;td data-bind="text: name"&gt;&lt;/td&gt; &lt;td data-bind="text: dob"&gt;&lt;/td&gt; &lt;td data-bind="text: phone"&gt;&lt;/td&gt; &lt;td data-bind="text: email"&gt;&lt;/td&gt; &lt;td&gt;&lt;button class="btn btn-danger btn-mini" data-bind="click: $root.removeCustomer"&gt;Delete&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p></p> <p>And here is the viewmodel:</p> <pre><code>define(function(require){ // Load System for debugging var system = require('durandal/system'); // Customer Structure function Customer(data) { this.name = ko.observable(data.name); this.dob = ko.observable(data.dob.substring(5,7) + '/' + data.dob.substring(8,10) + '/' + data.dob.substring(0,4)); this.phone = ko.observable(data.phone); this.email = ko.observable(data.email); }; // Form observables var inputName = ko.observable(''); var inputDOB = ko.observable(''); var inputPhone = ko.observable(''); var inputEmail = ko.observable(''); // Customers array var customers = ko.observableArray([]); return { inputName: inputName, inputDOB: inputDOB, inputPhone: inputPhone, inputEmail: inputEmail, customers: customers, // This performs any needed functionality after the page loads activate: function(data) { // Change the selected nav item $('.customerNav').addClass('active'); $('.firstNav').removeClass('active'); $('.secondNav').removeClass('active'); // Get current customers from database and add to customers observableArray $.getJSON( // Backend script 'php/query.php', // Variables sent to query.php { mode: 'select', table: 'customers', 'fields[]': '*', 'values[]': '*' }, // Callback function function(data) { var customer = $.map(data, function(item) {return new Customer(item) }); customers(customer); } ); // For some reason I couldn't get the datepicker to work without make the page // wait 50 milliseconds. setTimeout(function() { $('.date').datepicker(); },500); } }; }); </code></pre> <p>Also, as a side note, the jQuery at the top and bottom of the activate function only work when I surround them in a setTimeout() function. I left the datepicker as an example. It's not as crucial, but if anyone knows how to fix that, too, I would greatly appreciate it.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoel Cochran
    1. USsmalone
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to use observables in Durandal?
      1. USChristian Droulers
      1. VTFavorite
    2. VO
      singulars
      1. POHow to use observables in Durandal?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to use observables in Durandal?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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