Question

我对Knockout很新，但真的很喜欢它，与旧的手工技术相比，肯定会有很大的不同！

我目前正在处理单页应用程序，以显示来自用户分机的电话呼叫。我创建了一些REST服务：

GET /extensions - 返回当前用户可用的分机号码列表

GET /calls/<extension> - 返回在给定扩展名上进行的调用列表

在我的SPA中，我想列出每个分机的表格，显示有关电话的数据，但不确定我的视图模型应采取的角度。

目前我正在考虑以下内容：

function extension(extn) {
    var model = ko.mapping.fromJS(extn);
    model.calls = ko.observableArray(); // load calls in to here

    return model;
}

function CallsViewModel() {
    var self = this;
    self.extnData = ko.observableArray();

    $.getJSON("/extensions", null, function (data) {
        self.extnData($.map(data, extension));
    });
}

我最初将扩展加载到模型中，然后加载调用扩展对象。但是我现在只是在这个阶段徘徊，所以不确定这是否理想？

是否有关于如何处理此问题的建议，很高兴在任何级别发表评论，包括REST API本身（尽管我认为这方面是合理的）。干杯！

Answer 1

与REST服务交互不应该真正改变viewmodel代码的结构方式。希望您将数据访问与视图模型代码隔离开来，以便检索它们的方式无关紧要。您可以通过多种方式执行此操作，但将它们包装在service对象中是非常常见的。

不完全确定这是否是您所追求的，因为您没有提供任何数据结构的提示，我无法确定。你肯定是在正确的道路上，但我会做something like this：

var Call = function (data) {
    this.number = ko.observable(data.number);
    this.duration = ko.observable(data.duration);
};

var Extension = function (id) {
    var self = this;
    self.id = ko.observable(id)
    self.calls = ko.observableArray();

    self.callsLoaded = ko.observable(false);
    self.loadCalls = function() {
        var calls = ko.utils.arrayMap(dataService.getCallsMock(self.id()), function (c) {
           return new Call(c); 
        });
        self.calls(calls);
        self.callsLoaded(true);
    };
};

var Viewmodel = function() {
    var self = this;

    var extensions = ko.utils.arrayMap(dataService.getExtensionsMock(), function(e) {
       return new Extension(e); 
    });
    self.extensions = ko.observableArray(extensions);
};

显然，当您实际制作时，模拟ajax调用将基于回调。

这里的想法是立即加载扩展，但每个扩展的调用都是按需完成的。这听起来就像你的意思，但并不是很清楚。

使用REST服务的Knockout.js - 结合父/子数据

1 个答案: