为何data-bind在字符串内失效？Google Maps信息窗按钮绑定问题

我帮你分析下问题出在哪，以及怎么修复：

首先，你遇到的核心问题有两个：

1. 动态DOM元素未被Knockout绑定：当你用字符串拼接生成按钮并设置为信息窗口内容时，这个按钮是在信息窗口打开后才被插入到页面DOM中的。Knockout默认只会在初始调用ko.applyBindings()时处理已存在的DOM元素，后续动态添加的元素需要手动触发绑定才能生效。
2. 点击绑定目标错误：你给按钮绑定的removeTurbineColor是一个observable对象，而Knockout的click绑定需要的是一个函数——点击按钮时要通过函数去修改observable的值，这样订阅事件才会被触发。

修复方案 #

下面是调整后的完整代码，我会标注关键修改点：

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

    // 保留你原有的订阅逻辑
    self.removeTurbineColor.subscribe(function(newValue) {
        console.log("turbine changed to:", newValue);
    });

    // 新增：点击按钮的处理函数，负责切换observable的值
    self.toggleTurbineColor = function() {
        self.removeTurbineColor(!self.removeTurbineColor());
    };

    function addToolTip(currentTurbine, turbineIcon){
        // 1. 放弃字符串拼接，直接创建真实的DOM容器
        var tooltipContainer = document.createElement('div');
        tooltipContainer.innerHTML = "name"; // 添加原有文本内容

        // 2. 创建按钮DOM元素
        var removeButton = document.createElement('button');
        removeButton.id = 'remove-emergency-turbine';
        removeButton.textContent = 'remove';
        // 设置正确的data-bind属性，绑定到新的处理函数
        removeButton.setAttribute('data-bind', 'click: toggleTurbineColor');

        tooltipContainer.appendChild(removeButton);

        var infoWindowTurbine = new google.maps.InfoWindow({
            content: tooltipContainer // 传入DOM元素而非字符串
        });

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

                // 3. 监听信息窗口的domready事件，确保DOM插入页面后再绑定
                google.maps.event.addListenerOnce(infoWindowTurbine, 'domready', function() {
                    // 对容器元素应用Knockout绑定，上下文是当前ViewModel
                    ko.applyBindings(self, tooltipContainer);
                });
            });
        }
    }
}

为什么这样能生效？ #

• 直接创建DOM元素而非字符串，让Knockout能够识别并处理这些元素；
• toggleTurbineColor函数负责修改removeTurbineColor的状态，点击按钮时会触发observable的变化，进而触发你订阅的日志输出；
• domready事件确保在信息窗口的DOM完全加载到页面后才执行绑定，避免了绑定时机过早导致元素不存在的问题。

内容的提问来源于stack exchange，提问作者Romazho