javascript - 从数据绑定(bind)属性迭代键值对

Question

我想使用 javascript 迭代数据绑定(bind)属性中的每个键和值。你有什么想法吗？使用el.getAttribute('data-bind')后我是否应该使用某种substring和split。

这是一个简单的例子:

<div data-bind="innerHTML: text, style: { color: color, width: '500px', height: '500px', backgroundColor: 'green' }"></div>

我想使用pure javascript通过迭代从innerHTML和style键一一获取值。

Answer 1

将字符串转换为 json 对象。然后使用key来获取value。您需要按如下方式更新 HTML。

// all values of the attribute must be quoted with single quote. i.e. It should be innerHTML : 'text' not innerHTML : text
<div data-bind="innerHTML: 'text', style: { color: 'color', width: '500px', height: '500px', backgroundColor: 'green' }"></div>

var attributeValue = document.getElementsByTagName("div")[0].getAttribute("data-bind");
var json = JSON.stringify(eval('({' + attributeValue + '})'));

然后需要解析json对象，然后调用键值，如下，

var parsedJSON = JSON.parse(json);

alert(parsedJSON["innerHTML"]);
alert(parsedJSON["style"]["width"]);

jsFiddle

如果您想循环访问 style 属性，请尝试这种方式，

for(var attr in parsedJSON["style"]){
    alert(attr + " : " + parsedJSON["style"][attr]);
}

jsFiddle