如何使用Knockout修改HTML元素data-bind中的target属性？

没问题！在Knockout里完全可以实现你想要的需求，不过咱们不用直接去修改DOM上的data-bind属性字符串——毕竟Knockout的核心就是数据驱动UI，用ViewModel来控制才是更符合它设计思路的做法，也能和你已有的业务逻辑更好整合。

下面分两种常见场景给你具体方案：

1. 动态设置HTML元素的target属性 #

比如你想让某个元素（比如链接）的target属性随业务逻辑变化，只需要在ViewModel里定义一个可观察对象（observable），然后通过attr绑定关联到元素上：

ViewModel代码 #

function MyViewModel() {
    // 初始化默认的target值，这里用_blank举例
    this.currentTarget = ko.observable("_blank");

    // 模拟你的业务逻辑：比如某个操作触发后修改target
    this.switchTarget = function() {
        // 切换为_self，你可以根据实际业务逻辑调整值
        this.currentTarget(this.currentTarget() === "_blank" ? "_self" : "_blank");
    };
}

// 绑定ViewModel到页面
const viewModel = new MyViewModel();
ko.applyBindings(viewModel);

HTML代码 #

<!-- 用attr绑定动态设置target属性 -->
<a data-bind="attr: { target: currentTarget }, href: 'https://example.com', text: '跳转链接'"></a>

<!-- 触发修改的按钮，模拟你的业务触发场景 -->
<button data-bind="click: switchTarget">切换跳转目标</button>

当你调用viewModel.currentTarget(newValue)时，元素的target属性会自动更新，完全不需要手动修改data-bind的内容。

2. 在事件绑定中动态处理target元素 #

如果你的需求是在触发事件（比如点击div）时操作事件的target元素，直接在事件处理函数里通过event参数获取即可：

ViewModel代码 #

function MyViewModel() {
    this.handleDivClick = function(data, event) {
        // event.target就是触发事件的DOM元素
        const targetElement = event.target;
        console.log("当前点击的元素：", targetElement);
        
        // 这里可以根据你的业务逻辑修改元素的属性或内容
        targetElement.style.backgroundColor = "#eee";
        // 比如动态添加属性
        targetElement.setAttribute("data-custom", "updated-value");
    };
}

ko.applyBindings(new MyViewModel());

HTML代码 #

<div data-bind="click: handleDivClick">点击我操作target元素</div>

额外提示：动态控制绑定的开关 #

如果你的场景需要动态决定是否启用target相关的绑定，可以用计算属性（computed）来实现：

function MyViewModel() {
    this.isOpenNewTab = ko.observable(true);
    // 根据开关动态返回target值
    this.linkTarget = ko.computed(function() {
        return this.isOpenNewTab() ? "_blank" : "_self";
    }, this);
}

HTML里还是用attr: { target: linkTarget }绑定即可，切换isOpenNewTab的值就会自动更新target。

总的来说，Knockout不推荐直接修改DOM上的data-bind字符串，通过ViewModel的可观察对象来驱动UI变化，既符合MVVM模式，也能让你的代码更易维护。

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