Question

我希望使用data-bind将所有eval键值对作为对象，并将此object's属性绑定到model对象的相同属性。

<div data-bind="innerHTML: text, style: { color: color }"></div>

Array.prototype.slice.call(document.querySelectorAll('[data-bind]')).forEach(function (el) {
    var model = { text: 'text', color : 'red' }
    var boundData = eval('({' + el.getAttribute('data-bind') + '})');
}

最终结果应为：

boundData.text等于模型的属性文本属性

boundData.color等于模型的属性颜色属性

此示例为我提供了Uncaught ReferenceError: text is not defined

Answer 1

如果你已经计划使用eval，我想你可能不介意使用大多数JavaScripters远离的其他东西：with。与eval一样，with的非常有限的使用可能是合适的。在这种情况下，它完成了这项工作：

Array.prototype.slice.call(document.querySelectorAll('[data-bind]')).forEach(function (el) {
    var boundData, model = { text: 'text', color : 'red' }
    with (model) {
        boundData = eval('({' + el.getAttribute('data-bind') + '})');
    }
});

生成的boundData将包含innerHTML和style属性（其中style是具有color属性的对象），您必须进行调整他们要让它拥有text和color属性。

示例：

var dataBindValue = "innerHTML: text, style: { color: color }";
var boundData, model = { text: 'text', color : 'red' }
with (model) {
  boundData = eval('({' + dataBindValue + '})');
}
snippet.log("boundData.innerHTML = " + boundData.innerHTML);
snippet.log("boundData.style.color = " + boundData.style.color);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

FWIW，here's the case against using with generally。

使用来自其他对象属性的值绑定对象的属性

1 个答案: