用ajax淘汰复杂类型的绑定数组答案

【问题标题】：Knockout bind array of complex type with ajax用ajax淘汰复杂类型的绑定数组
【发布时间】：2016-01-03 01:28:10
【问题描述】：

我有一个引导导航选项卡，我想在选择选项卡时动态显示内容。 Ajax 返回一个结果数组。每个结果都有 Price、Logo、Companyname 和 Covers 数组。每个封面都有 Price、MaxCover、Optional 和 Description。其余的 html 代码在这里 link 但现在我想返回一个更复杂的类型。

<script type='text/javascript'>

var cover = new
    {
        Price: ko.observable(),
        MaxCover: ko.observable(),
        Optional: ko.observable(),
        Description: ko.observable(),
    }
var result = new
    {
        Price: ko.observable(),
        InsLogo: ko.observable(),
        CompanyName: ko.observable(),
        Covers: ko.observableArray()
    };

var tab = function (Id, name, selected) {
    this.Id = Id;
    this.name = name;
    this.Results = ko.observableArray();
    this.isSelected = ko.computed(function () {
        return this === selected();
    }, this);
}

var ViewModel = function () {
    var self = this;
    self.selectedTab = ko.observable();
    self.tabs = ko.observableArray([
        new tab(0, 'Tab1', self.selectedTab),
        new tab(1, 'Tab2', self.selectedTab),
        new tab(2, 'Tab3', self.selectedTab)
    ]);
    self.selectedTab(self.tabs()[0]);

    self.selectedTab.subscribe(function () {
        $.ajax({
            url: '@Url.Action("GetSection")',
            data: { Id: self.selectedTab().Id },
            type: 'GET',
            success: function (data) {
                self.selectedTab().Results(data.Results); //Here I want to fill the results!!!!!!
            }
        });

    });

}
ko.applyBindings(new ViewModel());

【问题讨论】：

您遇到的任何问题？据我所知，数据并没有那么复杂。添加一个小提琴，这样我就可以帮助你。欢呼
您不需要将new 与对象文字{} 一起使用——事实上，这是一个错误。使用{} 就足够了。

标签： asp.net-mvc knockout.js

【解决方案1】：

您的方法还可以，但有一些小故障。一些改进建议：

制作您的视图模型，以便它们从参数对象初始化自己。
在不必要时不要在视图模型之间引入依赖关系。我在这里考虑isSelected 属性，这可以在视图中处理。例如，当在 foreach: tabs 内部时：data-bind="css: {selected: $data === $parent.selectedTab()}"
您遇到了时间问题：首先订阅selectedTab，然后使用self.selectedTab(self.tabs()[0]); 对其进行初始化。原因应该很明显。（通常，将视图模型创建分为“设置”和“初始化”阶段很有用。）
仅在选项卡详细信息仍为空时发送 Ajax 请求以获取选项卡详细信息。
订阅接收可观察对象的新值作为参数，使用它。
Observables 是函数：
- 如果您想在其中存储 Ajax 响应，可以直接将它们用作回调。
- 以同样的方式，您可以将它们用作事件处理程序：
  data-bind="click: $parent.selectedTab"。
JS 约定是将PascalCase 用于构造函数名称（如在视图模型中），将camelCase 用于所有其他标识符。

综上所述，我们得到：

function Tab(data) {
    this.Id = data.Id;
    this.name = data.name;
    this.Results = ko.observableArray();
}
function ViewModel(data) {
    var self = this;

    // setup
    self.selectedTab = ko.observable();
    self.selectedTab.subscribe(function (selectedTab) {
        if (selectedTab.Results()) return;
        $.get('@Url.Action("GetSection")', {Id: selectedTab.Id}).done(selectedTab.Results);
    });

    // init
    self.tabs = ko.observableArray(ko.utils.arrayMap(data.tabs, function (tabData) {
        return new Tab(tabData);
    }));
    self.selectedTab(self.tabs()[0]);
}
ko.applyBindings(new ViewModel({
    tabs: [
        {Id: 0, name: 'Tab1'},
        {Id: 1, name: 'Tab2'},
        {Id: 2, name: 'Tab3'}
    ]
}));

要将来自服务器的普通数据结构（如数组结果和封面）转换为视图模型、可观察对象和可观察数组的结构，我建议查看mapping plugin。

【讨论】：