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

时间:2013-03-08 16:14:30

标签: knockout-mapping-plugin single-page-application hottowel

我刚开始使用HotTowel并且给我留下了深刻的印象。我设法学习如何使用敲除绑定。 这是我面临的问题:

我有一个3页的网站:Home,About,Jar

在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但仍可以添加新的jar。

任何人都可以帮我弄清楚导航后如何重新映射对象? 感谢。

1 个答案:

答案 0 :(得分:4)

你的repo.getJars(this.jars);是一项异步任务,因此您必须在激活函数中返回一个可以正常工作的承诺。

我认为这会解决问题:

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

您的回购也应该回复承诺:

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