如何在Durandal中使用observable？

Question

我对Durandal很新.我对KnockoutJS有一点经验.我试图从一个从php文件中检索到的json填充一个observableArray.然后我尝试将数组加载到表中.在首次加载页面时将数据加载到表中似乎存在问题.我执行一个system.log(客户)只是为了确保数据在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>

这是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()函数中时才起作用.我以datepicker为例.它不是那么重要,但如果有人知道如何解决这个问题,我会非常感激.

Answer 1

谢谢,保罗.我昨晚很晚了.我忘了回复添加答案.我从Durandal的创造者Rob Eisenberg那里得到了答案.我的错误是我需要从.getJSON()调用中返回promise.我还需要向模块中添加另一个函数viewAttached(),用于引用DOM中元素的所有jQuery调用.

以下是Rob对帮助的回复,observableArray未在视图中更新.他们在这个小组中真的很有帮助.Rob很快回答了大多数问题.

以下是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 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