js中的剔除数据绑定语法（不是HTML）

Question

I understand I can create bindings using the following syntax in the dom:

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

Working example here: https://jsfiddle.net/m14mohda/

But can I create such a span element in js? ie using something like:

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

Answer 1

The DOM Element API offers two ways of doing this. The more general one, that should work with any custom attribute is using the setAttribute method.

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

creates the element

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

Specifically for attributes that are data- prefixed, the specification includes the shorthand property accessor dataset .

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

which creates the element

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

So you can see that dataset takes the data- prefix for granted. data- attribute values can then be accessed and assigned through dataset by stripping the data- part.