如何迭代Knockout ObservableArray？(长0)

Question

我是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);
        });
    });
};

Answer 1

这条线可能是罪魁祸首:

var length = viewModel.InitialData.length;

请记住,这InitialData是一个功能.函数有一个length(它是它们的"arity",它们具有的形式参数的数量),但是可观察数组的可观察函数length不是数组的length..

你可能想要里面数组的长度:

var length = viewModel.InitialData().length;
// -------------------------------^^

正如James指出的那样,你push对可观察数组的各种调用都可以工作,length因为Knockoutpush在可观察数组函数上提供了(以及其他一些东西).

同样,这一行:

var newAnnouncement = createAnnouncement(InitialData[i]);

可能也想要使用数组(并且viewModel.在前面缺少InitialData).

所以整个部分可能想要重构一下:

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);
}

旁注:你的代码(至少在问题中也是如此)也不会因为没有声明你在那个循环中使用而成为隐形全球恐怖的牺牲品.我添加了一个上面的内容,但这是使用循环数组的另一个原因.iforvarforEach