Within my ViewModel, I have defined a variable called self = this; Another foreach binding is working in my code, but it is not within an ajax request. The initial UI load is functioning correctly. I have confirmed that self.wikiData is being updated by testing with console.log(self.wikiData());, but the update is not reflecting in the UI. I have a similar setup working outside the ajax request.
self.wikiData = ko.observableArray([{title: ko.observable("testing"), url: ko.observable("code")}, {title: ko.observable("this"), url: ko.observable("works")}]);
$.ajax({
url: "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + marker.title + "&callback=wikiCallBack",
dataType: 'jsonp',
success: function(response) {
// issue with updating ko array
// Clear wikiData array's contents
self.wikiData = ko.observableArray([]);
var articleList = response[1];
if (articleList.length < 1) {
self.wikiData.push({ title: ko.observable("No articles found), url: ko.observable("#") });
}
for (var i = 0; i < articleList.length; i++) {
articleStr = articleList[i];
self.wikiData.push({ title: ko.observable(articleStr), url: ko.observable("http://en.wikipedia.org/wiki/" + articleStr) });
}
// Push wiki attribution regardless of whether articles were found
self.wikiData.push({ title: ko.observable("Courtesy of Wikipedia API"), url: ko.observable("https://www.mediawiki.org/wiki/API:Main_page") });
if (self.isWikiMenuVisible() === false) {
self.clickHamburgerWiki();
}
}
});<ul data-bind="foreach: wikiData">
<li class="wiki-list-item">
<a data-bind="text: title, attr:{href: url}"></a>
</li>
</ul>