https://stackoverflow.com/questions/47229195/translate-from-jquery-to-mvvm-model-does-not-load-contents

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="infowindow" style="border: 1px dashed blue">

</div>

JavaScript

function loadData(cityStr) {
  var $wikiElem = $('#wiki');
  $wikiElem.text("");
  var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + cityStr + '&format=json&callback=wikiCallback';
  var wikiRequestTimeout = setTimeout(function() {
    $wikiElem.text("failed to get wikipedia resources");
  }, 8000);
  $.ajax({
    url: wikiUrl,
    dataType: "jsonp",
    success: function(response) {
      var article = response[1];
      var url = 'http://en.wikipedia.org/wiki/' + article[0];
      $wikiElem.html('<br><a href="' + url + '"> Wikipedia: ' + article[0] + '</a>');
      clearTimeout(wikiRequestTimeout);
    }
  });
}

//then in main function:

function get_innerHTML(place) {
  var innerHTML = '<div id="information">';
  innerHTML += "<form data-bind='submit: submit_wiki'><p id='wiki'>Testing Wiki!</p></form>";
  innerHTML += '</div>';
  return innerHTML;
}


//  KnockOutJS
var viewModel = function() {
  var self = this;
  self.submit_wiki = function(location) {
  	console.log('submit called');
    loadData('guam');
  }
}
//ko.applyBindings(new viewModel());



//function getPlacesDetails(marker) {
//  var service = new google.maps.places.PlacesService(map);
//  service.getDetails({
//    placeId: marker.id
//  }, function(place, status) {
//    if (status === google.maps.places.PlacesServiceStatus.OK) {
//      infowindow.marker = marker;
		var infowindow = $("#infowindow");
    var innerHTML = get_innerHTML();
    infowindow.html(innerHTML);
    ko.applyBindings(new viewModel(), infowindow[0])
    //infowindow.open(map, marker);

    // add wikipedia result to innerHTML
    $('#wiki').submit();
//    infowindow.addListener('closeclick', function() {
//      infowindow.marker = null;
//    });
//    } else {
//      alert("Fail to load Google places information, please try again");
//    }
//  });
//}