I just started using knockout.js and it works great with normal bidings. I have a problem with observableArray.
I want to create an observableArray and assign to it a JSON data from Google Feed API. Here is the JSON format https://developers.google.com/feed/v1/devguide#resultJson
google.load("feeds", "1"); // Loads Google Feed API
function FeedViewModel()
{
// Data
var self = this;
self.allEntries = null;
// Example property, and it works
self.feedHead = ko.observable("BBC News");
var feed = new google.feeds.Feed("feeds.feedburner.com/BBCNews");
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
feed.includeHistoricalEntries();
feed.setNumEntries(30);
// Loads feed results
feed.load(function (result) {
if (!result.error) {
self.allEntries = ko.observableArray(result.feed.entries);
// accessing the title from here is OK
alert(self.allEntries()[1].title);
}
});
}
In the above example, accessing the array from the ViewModel is OK but I need to display it in the view (to the browser) using foreach:allEntries
<h2 data-bind="text: feedHead">Latest News</h2>
<!-- ko foreach:allEntries -->
<div class="lists">
<a href="#" data-bind="text: title"></a>
</div>
<!-- /ko -->
But nothing the ko foreach loop returns nothing. The observable feedHead is OK.
Also I dont have any JS error. Any help..
If you want to detect and respond to changes of a collection of things, use an observableArray . This is useful in many scenarios where you're displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.
You should look at defining the object structure for each element of your array and then add elements of that type to your observable array. Once this is done, you will be able to do something like item. productQuantity(20) and the UI will update itself immediately. EDIT Added the function provided by the OP :).
prototype. loadNote = function (id) { var self = this; $. getJSON(uri + '/' + id, function (data) { self. note(data); }); }; // Apply bindings ko.
Try declaring ( where you have the // Data )
self.allEntries = ko.observableArray([]);
then in the load...
self.allEntries(result.feed.entries);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With