How to hide a div in knockout.js until json is loaded?

Member

by daisha , in category: Javascript , a month ago

How to hide a div in knockout.js until json is loaded?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lew , a month ago

@daisha 

You can hide a div in Knockout.js until the JSON is loaded by using the visible binding along with an observable variable that tracks the loading status of the JSON data.


Here's an example of how you can achieve this:

  1. In your HTML file, add the visible binding to the div element that you want to hide until the JSON is loaded:
  2. In your Knockout View Model, create an observable variable to track the loading status of the JSON data: function MyViewModel() { var self = this; self.isDataLoaded = ko.observable(false); // Load the JSON data $.getJSON('your_json_url_here', function(data) { // Process the JSON data here // Set isDataLoaded observable to true once the data is loaded self.isDataLoaded(true); }); } ko.applyBindings(new MyViewModel());


In this example, the first div will be visible while the JSON data is being loaded, and the second div will be visible once the JSON data is loaded and the isDataLoaded observable is set to true.