0

我对 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 本身（尽管我认为这方面是合理的）。干杯!

4

1 回答 1

2

与 REST 服务交互不应真正改变视图模型代码的结构方式。希望您将数据访问与视图模型代码隔离开来，这样它们的检索方式就无关紧要了。您可以通过多种方式做到这一点，但将它们包装在一个service对象中是一种很常见的方法。

不完全确定这是否是您所追求的，因为您没有暗示您的数据结构是什么，我无法确定。你肯定走在正确的道路上，但我会做这样的事情：

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 调用时，它们将是基于回调的。

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

于 2013-07-30T06:40:49.400 回答