knockout js数据绑定未更新

Question

我正在开发一个包含多个区域的SPA，我会动态加载到div（id = #main）。

为了达到这个目的，我使用SammyJS作为路由和knockoutjs进行绑定。特定子页面的加载方式与$('#main').load('pages/subpage.html');类似，其中子页面包含两个已切换的div（主/详细模式）。

使用.getJSON('data.php',....)将数据加载到创建的挖空模型中的observableArray中。

一切正常，第一次加载页面时会显示项目列表。

当我选择一个项目并使用后退按钮切换回列表时，后退按钮只调用self.list()，我将currentUser设置为null，而不是包含项目的正确列表用户数组显示纯掩码，没有任何数据绑定（显示两个div）。

错误：项目列表不再显示，尽管数据仍在那里（使用console.log(...)检查。数据肯定是可用且正确但不知何时绑定未更新...

这里是特定的代码示例：

<div data-bind="load: loadData()">

<div id="userlist" class="row" data-bind="visible: !currentUser()">
    <h1 class="lead">Please select a User ...</h1>
    <div class="twelve columns">
        <table class="striped rounded" data-bind="visible: users().length > 0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: users">
                <tr data-bind="click: $parent.show">
                    <td><span data-bind="text: id"></span></td>
                    <td><span data-bind="text: firstname"></span></td>
                    <td><span data-bind="text: lastname"></span></td>
                    <td>
                        <a class="default btn" data-bind="click: $parent.show">show</a>
                        <a class="default btn" data-bind="click: $parent.delete">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 
    User Details
-->
<div id="userdetails" class="row" data-bind="with: currentUser">
    <div class="breadcrumb"><span data-bind="click: $root.list">Userdetails &gt;</span> <span data-bind="text: name"></span></div>

    <div class="twelve columns">

        <table class="striped rounded">
        <tbody>
        <form></form>
            <tr class="field">
                <td><label class="inline" for="userFirstName">Firstname</label></td>
                <td style="width:100%"><input class="normal text input" name="userFirstName" type="text" placeholder="First name" data-bind="value: firstname"></td>
            </tr>
            <tr class="field">
                <td><label class="inline" for="userlastname">Firstname</label></td>
                <td style="width:100%"><input class="normal text input" name="userlastname" type="text" placeholder="Family name" data-bind="value: lastname"></td>
            </tr>

        </tbody>
        </table>

        <div>
            <div class="medium btn default"><a href="#" data-bind="click: $root.save">save</a></div>
            <span>&nbsp;</span>
            <div class="medium btn default"><a href="#" data-bind="click: $root.delete">delete</a></div>
            <div class="medium btn default"><a href="#/users">back</a></div>
        </div>
    </div>
</div>

<!-- 
    Knockout Models
-->
<script>

    ko.validation.init({ grouping : { deep: true, observable: true } });
    ko.validation.rules.pattern.message = 'Invalid.';

    ko.validation.configure({
        registerExtenders: true,
        messagesOnModified: true,
        insertMessages: true,
        parseInputAttributes: true,
        //messageTemplate: null,
        decorateElement: true
    });

    var userModel = function(){

        var self = this;
        self.id = ko.observable(); 

        self.firstname = ko.observable().extend({required: { message: 'First name is a required field.' }});
        self.lastname = ko.observable().extend({required: { message: 'Last name is a required field.' }});

        return self;
    };

    var userData = function(){

        var self = this;    
        self.users = ko.observableArray([]);
        self.currentUser = ko.observable();

        self.viewMode = ko.observable('list');

        self.list = function(){

            self.currentUser(null);
            self.viewMode('list');

            location.hash = '/users';
            console.log('list '+ self.users().length+ ' users');
            console.log(ko.toJSON(self.users()));

        };
        self.show = function(item){

            self.currentUser(item);
            self.viewMode('details');

            location.hash = '/users/' + item.id();
            console.log('show user:'+ko.toJSON(item));
        };

        self.loadData = function(){
            //fetch existing data from database

            console.log('loaddata - User');
            //self.users = ko.observableArray([]);

            $.getJSON("pages/user.php", function(data) { 

                    data.forEach(function(item){

                        var newModel = new userModel();
                        newModel.id(item['id']);
                        newModel.firstname(item['firstname']);
                        newModel.lastname(item['lastname']);

                        self.users.push(newModel);

                    });
            });

        }
    }

    if (!_userData){

        var _userData = new userData();
        ko.applyBindings(_userData);

    }

</script>