javascript - knockout js 中的数据绑定(bind)语法(不是 HTML)

Question

我知道我可以在 dom 中使用以下语法创建绑定(bind):

 <span id="namespan" data-bind="text: personName"> 

此处的工作示例:https://jsfiddle.net/m14mohda/

但是我可以在js中创建这样的span元素吗？即使用类似的东西:

createSpans = function (){
    var s = document.createElement('span')
    s.id = "namespan"
    s.data-bind ="text: personName" -----> ????
    document.body.appendChild(s)
}

Answer 1

DOM Element API 提供了两种执行此操作的方法。更通用的方法是使用 setAttribute 方法，它应该适用于任何自定义属性。

var s = document.createElement('span');
s.setAttribute("someAttribute", "someValue");
s.setAttribute("data-bind", "text: personName");
document.body.appendChild(s);

创建元素

<span someAttribute="someValue" data-bind="text: personName"></span>

特别是对于以 data- 为前缀的属性，该规范包括简写属性访问器 dataset。

var s = document.createElement('span');
s.dataset.someAttribute = "someValue"; // won't work as expected       
s.dataset.bind = "text: personName";
document.body.appendChild(s);

创建元素

<span data-someAttribute="someValue" data-bind="text: personName"></span>

所以你可以看到dataset理所当然地使用data-前缀。然后，可以通过剥离 data- 部分，通过 dataset 访问和分配 data- 属性值。