HotTowel：在页面之间导航时 Viewmodel 丢失映射

Question

我刚开始使用 HotTowel，印象非常深刻。我设法学习如何将它与淘汰赛绑定一起使用。 这是我面临的问题：

我有一个包含 3 个页面的网站：主页、关于、Jar

在罐子里我有：

define(['services/logger', 'repo/jarrepo'], function (logger, repo) {
    var Jar = function () {
        this.Id = ko.observable(0);
        this.Name = ko.observable('');        
    }

    this.jars = ko.mapping.fromJS([]);

    var vm = {
        title: ko.observable('JARS'),
        jars: jars,
        AddJar: function () {
            this.jars.push(new Jar);
        },
        DeleteJar: function (jar) {
            jars.destroy(jar);
        },
        activate: function () {
            repo.getJars(this.jars);
            return true;
        }
    };

    return vm;
});

在我看来：

<div data-bind="foreach: jars">
    <label data-bind="text: name" />
    <a href="#" data-bind="click $root.DeleteJar">Delete</a>
</div>

我的回购代码：

$.getJSON("/api/jar/getjars", function (data) {
            ko.mapping.fromJS(data, jars);
        });

如果我在 Jar 页面上，它可以正常工作。但是，当我导航到 Home 并返回时，ko 映射丢失了。我使用 chrome 控制台检查它并检查 jars 数组，它的所有元素都丢失了属性中的 ko.mapping 节点。因此我无法删除 jar，但仍然可以添加新的。

谁能帮我弄清楚导航后如何重新映射对象？ 谢谢。

Answer 1

你的 repo.getJars(this.jars);是一个异步任务，所以你必须在你的 activate 函数中返回一个 Promise 才能正常工作。

我认为这样可以解决问题：

activate: function () {
        return repo.getJars(this.jars);
    }

你的 repo 也应该返回 promise：

function getJars(jars){
    return $.getJson(...);
}