jQuery 触发 select 使用 Knockout.js 更改站点数据绑定中的值 - 可能吗？

Question

我需要使用 Knockout.js 使用浏览器扩展程序激活网站中的 select 值。

我正在使用 jQuery 但我对触发 ko 方法有点迷茫。

这是我要更改值的select：

<select name="subDuration" class="select number_weeks" id="sub_duration"
data-bind="
    options: options.durationOptions, 
    optionsText: 'val', 
    optionsValue: 'key', 
    optionsCaption: 'Select subscription duration', 
    value:options.duration,
    event:{
        change: options.updateDuration,
        blur: options.validateDuration
    },
    attr:{
        'aria-invalid': options.hasDurationError,
        'aria-describedby': options.hasDurationError() ? 'sub_duration_error' : false
    }
" 
data-ctp-cont="Direct Debit Payments">
</select>

$("#sub_duration").focus().trigger("change", options).val(2).blur()

当我使用上面的 cde 行时，它会将值设置为 2，但站点验证运行时模糊不清，无法将其识别为有效。如果我 select 其他东西或者然后 2 再次它。感觉 jQuery 更改没有在站点 ko js 验证中触发。

知道我在这里遗漏了什么吗？遗憾的是，我从未与 knockout.js...

合作过

感谢任何帮助。谢谢！

Answer 1

直接更新 knockout 的底层视图模型中的值可能更容易。您还可以从那里触发绑定到事件处理程序的方法。

// The website part
ko.applyBindings({
  options: {
    duration: ko.observable(1),
    durationOptions: [
      { key: 0, val: "Option 0" },
      { key: 1, val: "Option 1" },
      { key: 2, val: "Option 2" }
    ],
    updateDuration: () => console.log("Updated duration"),
    validateDuration: () => console.log("Validated duration"),
    hasDurationError: ko.observable(false)
  }
});

// Your plugin
$("button").click(function(e) {
  const select = document.getElementById("sub_duration");
  const vm = ko.dataFor(select);
  
  // Change the value:
  vm.options.duration(2);  

  // Trigger the event handlers
  vm.options.updateDuration();
  vm.options.validateDuration();
  
});

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



<select id="sub_duration" data-bind="
  options: options.durationOptions, 
  optionsText: 'val', 
  optionsValue: 'key', 
  optionsCaption: 'Select subscription duration', 
  value:options.duration,
  event:{
    change: options.updateDuration,
    blur: options.validateDuration
  },
  attr:{
    'aria-invalid': options.hasDurationError,
    'aria-describedby': options.hasDurationError() ? 'sub_duration_error' : false
  }
"></select>

<div>
Trigger your jQuery code: <button>Update value</button>
</div>

请注意，updateDuration 和 validateDuration 可能需要传递一些事件，例如对象和 this 上下文才能正常工作，具体取决于它们的实现。

Answer 2

感谢@user3297291 我遵循了在主站点中注入 js 的解决方案，以便能够运行代码形成我的扩展的内容脚本。

以下是我的扩展内容脚本中的解决方案代码，以防有人遇到同样的问题：

function myFunc() {
  //Trigger some Knockout JS functions on the main site scope.
}

var script = document.createElement('script');
script.appendChild(document.createTextNode('('+ myFunc +')();'));
(document.body || document.head || document.documentElement).appendChild(script);

感谢所有帮助过的人！

jQuery 触发 select 使用 Knockout.js 更改站点数据绑定中的值 - 可能吗？

jQuery trigger select change value in data-bind in a site using Knockout.js - Possible?

data-binding

jquery

triggers

knockout.js