Question

我想使用javascript从data-bind属性迭代每个键和值。你有什么想法吗？使用substring后，我应该使用某种split和el.getAttribute('data-bind')。

这是一个简单的例子：

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

我希望通过使用innerHTML的迭代逐个获取style和pure javascript个键的值。

Answer 1

将您的字符串转换为json对象。然后使用密钥获取价值。您需要按如下方式更新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

Answer 2

查看Knockout.js的绑定源代码。就像解析所有东西一样，魔鬼在细节中，这就是为什么它如此复杂！您可以使用parseObjectLiteral lib中的knockout.js函数，并遍历以下键：

 function enumerateProperties(str, items) {

     var n, i,
         arr = parseObjectLiteral(str);

     if (!str) { return 0; }

     for (i = 0; i < arr.length; i += 1) {
         if (arr[i].key) {
             n = enumerateProperties(arr[i].value, items);
             if (n == 1) {
                 items.push({
                     key: arr[i].key,
                     value: arr[i].value
                 });
             }
         }
     }

     return arr.length;
 }

这是使用knockout解析函数工作fiddle。

Answer 3

这可能有点作弊，但谁在乎呢。：P将其包装为对象并使用eval。（它不是有效的JSON。）

eval('({' + theStuffFromDataBind + '})')

从数据绑定属性中迭代键值对

3 个答案: