以编程方式从 "outside" 设置 knockout.js 值

Question

我是 knockout.js 的新手 - 我已经接管了一个用它编写的现有应用程序，之前的维护者已经离开 - 我想从编写测试开始，从它的外部运行整个过程。大多数页面都非常简单，但我遇到过这个：

<textarea maxlength="4000" 
   data-bind="valueWithPlaceholder: answerValue, 
    placeholder: exampleText, 
    maxLengthCountdown: answerValue"></textarea>

这是在一个 with 内，在另一个 with 内循环等等 - 我现在对弄清楚整个模式没有真正的兴趣 - 我只想将它设置为 javascript..

我试过 element.value = "blah" - 它明显地设置了值，但似乎没有以任何方式影响绑定 - 进入“下一步”仍然说我必须输入一些东西
我已经尝试过 element.focus()，一大堆 element.dispatchEvent( new KeyboardEvent(...) with keydown, keypress and key up，然后 element.blur () 什么都没有发生

有什么办法可以设置吗？我想要一些与理解架构无关的方法——因为我有一堆要设置的，并且想按照“set_text_area( element, value )” 的方式构建一些函数。我真的在寻找类似的东西：

element.value = "blah"
knockout.force_update_binding( element );   // I'm imagining this exists

注意：我要问的是如何在不了解底层模型的情况下以编程方式从元素设置值。显然，如果我知道模型，那么我只是设置它 - 但我只是点击我的测试工具中的一个元素并想输入一个值 - 我的测试工具无法去“理解”东西。

Answer 1

这有点反模式，但我从你的问题中得到的印象是你只想完成工作...

如果你知道可观察对象的名称属性

如果你知道属性要设置什么，你可以使用ko.dataFor获取属于该节点的viewmodel。

ko.applyBindings({
  myValue: ko.observable("Initial value")
});


ko.dataFor(document.querySelector("input")) // Get the viewmodel
  .myValue("New value");  // Set a new value

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

<input data-bind="value: myValue">

如果你只知道绑定类型

您还可以要求敲除应用于节点的所有绑定：

ko.applyBindings({
  myValue: ko.observable("Initial value")
});

// Get your node
const myNode = document.querySelector("input");

// Get the bindings
const bindings = ko
  .bindingProvider
  .instance
  .getBindings(
     myNode,
     ko.contextFor(myNode)
   )
 
// Get the observable that is used in the 'value' binding
const boundValue = bindings.value;

// Set a new value
boundValue("New value");

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

<input data-bind="value: myValue">

注意：您在模板中显示的绑定不是默认的敲除绑定。因此，如果上述示例不起作用，您可能需要与我们分享它们的实现，以便我们能够提供帮助。

以编程方式从 "outside" 设置 knockout.js 值

set knockout.js value programatically from "outside"

html

javascript

knockout.js

如果你知道可观察对象的名称属性

如果你只知道绑定类型