Durandalでobservablesを使用するには？

Question

私はDurandalをかなり新しくしています。私はKnockoutJSで少し経験があります。私はPHPファイルから取得jsonからobservableArrayを移入しようとしています。私はその後、配列をテーブルにロードしようとしています。ページの最初の読み込み時にテーブルにデータを読み込む際に問題があるようです。私は、データがobservableArrayにあることを確認するためにsystem.log（customers）を実行します。ページを更新すると、データがテーブルにロードされます。これは、observableArrayがポピュレートされているように見えますが、ビューは更新されていません。

ページの最初の読み込みに負荷がかからないように私が何をしているのか不思議でした。ここでは、私がdurandalで試したテストサイト：http://dev.codeplanetapps.com/spa/です。ロードしたら、「得意先」をクリックします。問題のページはhttp://dev.codeplanetapps.com/spa/#/customersです。そのページが直接ロードされると正常に動作しますが、メインページからアプリケーションをロードして顧客に切り替えると、テーブルが正しく読み込まれません。助けを前にありがとう。ここで

は図である。

<div> 
<!-- Form to add new customer --> 
<form class="form-inline customerForm"> 
    <span>Add New Customer</span> 
    <input type="text" data-bind="value: inputName" placeholder="Name" /> 
    <input type="text" class="date input-small" data-bind="value: inputDOB" placeholder="Date of Birth" /> 
    <input type="text" class="input-small" data-bind="value: inputPhone" placeholder="Phone" /> 
    <input type="text" data-bind="value: inputEmail" placeholder="Email" /> 
    <button type="submit" class="btn btn-primary" data-bind="click: submitCustomer">Add</button> 
</form> 

<table class="table table-hover table-bordered customerTable"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>DOB</th> 
      <th>Phone Number</th> 
      <th>Email</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: customers"> 
     <tr> 
      <td data-bind="text: name"></td> 
      <td data-bind="text: dob"></td> 
      <td data-bind="text: phone"></td> 
      <td data-bind="text: email"></td> 
      <td><button class="btn btn-danger btn-mini" data-bind="click: $root.removeCustomer">Delete</button></td> 
     </tr> 
    </tbody> 
</table> 

そして、ここではviewmodelのです。また

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); 
     } 
    }; 
}); 

、サイドノート、アクティベートの上部と下部にjQueryのよう関数はsetTimeout（）関数でそれらを囲むときにのみ機能します。私は、日付ピッカーを例として残しました。それは重要ではありませんが、誰もそれを修正する方法を知っていれば、私はそれを高く評価します。

Answer 1

ありがとう、ポール。私は最後の夜遅くまで起きていた。私は答えを加えるために返信するのを忘れました。私はDurandalの創始者であるRob Eisenbergから答えを得ました。私の間違いは、.getJSON（）呼び出しから約束を返す必要があることでした。また、DOM内の要素を参照するすべてのjQuery呼び出しに対して、別の関数viewAttached（）をモジュールに追加する必要がありました。

ここにRobさんからの返信はHelp with observableArray not updating in viewです。彼らはこのグループに本当に役立ちます。ロブはほとんどの質問にはかなり素早く答えることができます。

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 allows us to add jQuery as usual 
    viewAttached: function() { 
     // Change the selected nav item 
     $('.customerNav').addClass('active'); 
     $('.firstNav').removeClass('active'); 
     $('.secondNav').removeClass('active'); 

     $('.date').datepicker(); 
    }, 
    // This performs any needed functionality after the page loads 
    activate: function(data) { 
     // Capture the module instance 
     var self = this; 

     // Get current customers from database and add to customers observableArray 
     var promise = $.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) }); 
       system.log(customers); 
       self.customers(customer); 
      } 
     ); 

     return promise; 
    } 
}; 
}); // define 

Answer 2

質問を投稿してから変更があったかどうかは分かりませんが、IE 9、Opera 12、Chromeでは問題なく動作します。 IE 9でエラーが発生しました。lines 45 and 46がshell.jsの場合、event.currentTarget.classListがnullになることがありますので、確認する必要があります。ただし、アプリケーションにアクセスしてCustomersをクリックすると、テーブルにデータがあります。