Question

我有一个bootstrap导航标签，我想在选择标签时动态显示内容。 Ajax返回一个Results数组。每个结果都有价格，标识，公司名称和一系列封面。每个封面都有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());

Answer 1

你的方法没问题，有一些小故障。一些改善它的建议：

制作视图模型，以便它们从参数对象初始化。
当您没有必要时，不要在视图模型之间引入依赖关系。我在这里想到isSelected属性，可以在视图中处理。例如，在foreach: tabs：data-bind="css: {selected: $data === $parent.selectedTab()}"
您有时间问题：首先订阅selectedTab，然后使用self.selectedTab(self.tabs()[0]);初始化它。应该是显而易见的原因。（通常，将视图模型创建拆分为＆＃34;设置＆＃34;以及＆＃34; init＆＃34;阶段非常有用。）
当标签详细信息仍为空时，仅发送标签详细信息的Ajax请求。
订阅接收observable的新值作为参数，使用它。
Observables是函数：
- 如果要在其中存储Ajax响应，可以直接将它们用作回调。
- 以同样的方式，您可以将它们用作事件处理程序：
  data-bind="click: $parent.selectedTab"。
JS约定是将PascalCase用于构造函数名称（如在viewmodels中）和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'}
    ]
}));

要将来自服务器的普通数据结构（如数组结果和封面）转换为viewmodels，observables和observable数组的结构，我建议您查看mapping plugin。

Knockout使用ajax绑定复杂类型的数组

1 个答案: