剔除从 ajax 调用返回数据

Posted 2023-03-27

【中文标题】剔除从 ajax 调用返回数据

【英文标题】：Knockout returning data from ajax call

【发布时间】：2014-07-26 22:21:24

【问题描述】：

好的，所以我对淘汰赛还很陌生，而且我已经很好地处理了数据绑定。但是，有一个模式是另一个程序员放在一起的，我想在同一个程序中遵循它，只是一种不同的形式。这是 .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)
        );

    );

这里有什么突出的吗？

【问题讨论】：

首先检查浏览器控制台是否有任何错误。如果不是错误，请添加一个 console.log(data)，以检查您是否获得任何数据

'his' 函数中有一个错字：data.Strength.IsCustomalysisStarted) 后面的括号。你遗漏了一些东西吗？

与profileData()相比，contactData() 是如何定义的？

getContactData() 是对象的集合。

getProfileData() 是单个对象。

【参考方案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);

【讨论】：

感谢内森，正是我所追求的。