我对杜兰达尔还很陌生。我对 KnockoutJS 有一点经验。我正在尝试从从 php 文件中检索到的 json 填充 observableArray。然后我试图将数组加载到表中。首次加载页面时将数据加载到表中时似乎存在问题。我执行 system.log(customers) 只是为了确保数据在 observableArray 中，它就是。当我刷新页面时，数据会按照我想要的方式加载到表中。看起来好像 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>
这是视图模型：
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() 函数中时才起作用。我以日期选择器为例。它不是那么重要，但如果有人也知道如何解决这个问题，我将不胜感激。