剔除从 ajax 调用返回数据

Question

好的，所以我对淘汰赛还很陌生，而且我已经很好地处理了数据绑定。但是，有一个模式是另一个程序员放在一起的，我想在同一个程序中遵循它，只是一种不同的形式。这是 .NET C# MVC5 VMMV。当我使用其他程序员页面上编写的代码时，一切都会返回。我的返回，但数据绑定不起作用。

两者都在视图模型中声明 两者都是通过模型中的ajax调用 两者都返回数据：

这是在 .cshtml 文件中 HIS CODE：返回profileData ko.observable并返回标签文本

<div class="btn-group margin-top-md pull-right" data-bind="with: profileData">
<label class="btn btn-success btn-xs active" data-bind="text: opportunityName">
</label>
<label class="btn btn-success btn-xs" data-bind="text: status">
</label>
<label class="btn btn-success btn-xs" data-bind="text: strengthIsCustom">
</label>
</div>

我的代码：返回 getContacts ko.observable，填充 getContacts 但不返回标签测试。

<div class="btn-group margin-top-md pull-right" data-bind="with: contactData">
<label class="btn btn-success btn-xs active" data-bind="text: TotalPublished">
</label>
<label class="btn btn-success btn-xs" data-bind="text: TotalUnpublished">
</label>
<label class="btn btn-success btn-xs" data-bind="text: TotalContacts">
</label>
</div>

功能相同： 我的：

 function getContacts() {
    model.getContacts().then(function (data) {

        contactData({
            TotalUnpublished: data.TotalUnpublished,
            TotalPublished: data.TotalPublished,
            TotalContacts: data.TotalContacts
        });

    });
}

他的：

function getProfileData() {
    model.getProfileData().then(function (data) {

        profileData({
            opportunityName: data.OpportunityName,
            status: data.OutcomeStatus,
            strengthIsCustom: data.Strength.IsCustomalysisStarted)
        });

    });
}

这里有什么突出的吗？

Answer 1

在您的 cmets 中，您说 getContacts 返回一个联系人数据数组。您似乎需要使用observableArray 来存储联系人数据。假设您需要双向数据绑定，您还需要遍历从服务器返回的数据并创建一个 new ContactData 对象以添加到数组中。

我已经根据您围绕联系人的代码创建了一个 jsfiddle 演示。我刚刚使它工作，可能需要调整以适应您的情况。

JSFiddle Demo

HTML

<div class="btn-group margin-top-md pull-right" data-bind="with: contact">
  <label class="btn btn-success btn-xs active" data-bind="text: totalPublished"></label>
  <label class="btn btn-success btn-xs" data-bind="text: totalUnpublished"></label>
  <label class="btn btn-success btn-xs" data-bind="text: totalContacts"></label>
</div>

JavaScript
注：使用Q promises库模拟服务器返回数据；

var model = {
    getContacts: function () {
        return Q.fcall(function () {
            return [{
                TotalUnpublished: 5,
                TotalPublished: 3,
                TotalContacts: 23
            }, {
                TotalUnpublished: 4,
                TotalPublished: 9,
                TotalContacts: 38
            }];
        });
    }
};

function ContactData(data) {
    var self = this;
    self.totalUnpublished = ko.observable(data.TotalUnpublished || 0);
    self.totalPublished = ko.observable(data.TotalPublished || 0);
    self.totalContacts = (data.TotalContacts || 0);
    return self;
}

var contacts = ko.observableArray([]);

function getContacts() {
    model.getContacts().then(function (data) {
        ko.utils.arrayForEach(data, function (item) {
            contacts.push(new ContactData(data));
        });
    });
}

var vm = {
    getContacts: getContacts,
    contacts: contacts
};
vm.getContacts();
ko.applyBindings(vm);