为什么数据绑定在字符串中不起作用？

Question

I am trying to add a button to a tool-tip (Info Windows) in Google Maps. I generate this button inside a string and I just add this string to the content of the tool-tip so it generates the button inside the tool-tip. The problem is that the data-bind doesn't seem to work this way.

Here is an image of the situation: https://imgur.com/gpyl0Mr

function MapViewModel() {
  var self = this;
  self.removeTurbineColor = ko.observable(false);

  function addToolTip(currentTurbine, turbineIcon){
    var turbineToolTip = "name";

    turbineToolTip += "<button id='remove-emergency-turbine' data-bind='click: 
    removeTurbineColor'> remove </button>";


   self.removeTurbineColor.subscribe( function() {
     console.log("turbine changed");
   });

  var infoWindowTurbine = new google.maps.InfoWindow({content: turbineToolTip});

  if(turbineIcon){
    google.maps.event.addListener(turbineIcon, "click", function(){
      infoWindowTurbine.setPosition(turbineIcon.getPosition());
      infoWindowTurbine.open(self.map, turbineIcon);
     });
   }

 }
}

I expect the output in the console to be "turbine changed" when I click on the button, but nothing appears.

Answer 1

Knockout bindings are set up when you first call ko.applyBindings . It won't apply bindings for elements inserted after that initial binding.

Instead of inserting HTML, you could append a button element and manually attach a click event handler.

Or, probably better, you could hard-code the button HTML so its bindings are applied at ko.applyBindings , and toggle its visibility with another observable.