为什么数据绑定在字符串内不起作用?

时间:2019-07-19 15:48:21

标签: javascript google-maps knockout.js

我正在尝试向Google地图中的工具提示(信息窗口)添加按钮。我在字符串中生成此按钮,然后将字符串添加到工具提示的内容中,以便它在工具提示中生成按钮。问题在于数据绑定似乎无法以这种方式工作。

以下是情况的图片: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);
     });
   }

 }
}

当我单击按钮时,我希望控制台中的输出是“涡轮已更改”,但是什么也没有出现。

1 个答案:

答案 0 :(得分:0)

当您第一次调用ko.applyBindings时,将建立淘汰绑定。对该初始绑定之后插入的元素将不应用绑定。

您可以添加按钮元素并手动附加click事件处理程序,而不是插入HTML。

或者,也许更好,您可以对按钮HTML进行硬编码,以便将其绑定应用于ko.applyBindings,并用另一个可观察的视角切换其可见性。