[英]How to iterate an Knockout ObservableArray? (length 0)
我是knockout.js的新手(这也是我的第一个stackoverflow帖子),我现在面临以下问题。
我无法将web api中的数据绑定到ko.observablearray。 为什么此公告ko.observablearray的长度始终为0? 该代码适用于客户端数据(通过添加新公告)..
这是JS代码:
var AnnouncementModel = function () {
var self = this;
self.AnnouncementText = ko.observable();
self.AllDepartmentsBool = ko.observable();
self.Editable = ko.observable(false);
self.Add = function () {
viewModel.Announcements.push(self);
viewModel.AnnouncementToEdit(new AnnouncementModel());
};
self.Delete = function () {
ajaxHelper(announcementsUri + self.ID, 'DELETE').done(
viewModel.Announcements.remove(self));
};
self.Edit = function () {
self.Editable(!self.Editable());
};
}
//The ViewModel
function AnnouncementsViewModel() {
var self = this;
self.InitialData = ko.observableArray();
self.Announcements = ko.observableArray();
self.AnnouncementToEdit = ko.observable(new AnnouncementModel());
self.error = ko.observable();
function getAllAnnouncements() {
ajaxHelper(announcementsUri, 'GET').done(function(data) {
self.InitialData(data);
});
};
getAllAnnouncements();
};
var viewModel = new AnnouncementsViewModel();
ko.applyBindings(viewModel, document.getElementById("announcements-container"));
function createAnnouncement(announcementDto) {
var announcement = new AnnouncementModel();
announcement.AnnouncementText = ko.observable(announcementDto.AnnouncementText);
announcement.AllDepartmentsBool = ko.observable(announcementDto.AllDepartmentsBool);
announcement.Editable = ko.observable(false);
return announcement;
}
var length = viewModel.InitialData.length;
for (i = 0; i < length; i++) {
var newAnnouncement = createAnnouncement(InitialData[i]);
viewModel.Announcements.push(newAnnouncement);
}
HTML:
<div id="announcements-container" style="display: inline-block; float: right">
<ul id="announcements-list" class="newsticker" data-bind="foreach: Announcements">
<li>
<span data-bind="html: AnnouncementText"></span>
</li>
</ul>
@Html.Partial("_AnnouncementsModal")
</div>
初始数据从api中填充,因为它应该:
很棒的工作! :
谢谢你的快速解答。 我通过使用.forEach()迭代数据来获得代码。 另一个问题是initialData没有在它的当前范围中填充,所以我编辑了getAnnouncements函数,就像这样工作:
function getAllAnnouncements() {
ajaxHelper(announcementsUri, 'GET').done(function(data) {
data.forEach(function (entry) {
var newAnnouncement = createAnnouncement(entry);
self.Announcements.push(newAnnouncement);
});
});
};
这条线可能是罪魁祸首:
var length = viewModel.InitialData.length;
请记住, InitialData
是一个函数 。 函数有一个length
(它们是“arity”,它们具有的形式参数的数量),但是可观察数组length
的可观察函数不是数组的length
。
你可能想要里面数组的长度:
var length = viewModel.InitialData().length;
// -------------------------------^^
正如James指出的那样 ,即使length
没有因为Knockout在可观察数组函数上提供push
(以及其他一些东西) ,你的各种调用push
可观察数组仍然有效。
同样,这一行:
var newAnnouncement = createAnnouncement(InitialData[i]);
可能也想使用数组(并且在InitialData
前面缺少viewModel.
)。
所以整个部分可能想要重构一下:
viewModel.InitialData().forEach(function(entry) {
var newAnnouncement = createAnnouncement(entry);
viewModel.Announcements.push(newAnnouncement);
});
或者没有forEach
(但实际上,它几乎是2016年,它可以在过时的浏览器上使用);
var data = viewModel.InitialData();
for (var i = 0; i < data.length; ++i) {
var newAnnouncement = createAnnouncement(data[i]);
viewModel.Announcements.push(newAnnouncement);
}
旁注:你的代码(至少就像在问题中一样)也是由于没有声明你在那个for
循环中使用的i
而成为隐形全球恐怖的牺牲品。 我在上面添加了一个var
,但这是使用forEach
循环遍历数组的另一个原因。
您还可以使用EcmaScript 6样式枚举,如下所示:
viewModel.InitialData().forEach(item => {
let newAnnouncement = createAnnouncement(item);
viewModel.Announcements.push(newAnnouncement);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.