0

我一直在使用 javascriptObject.defineProperty来创建数据绑定。我确实让它工作了。我的问题与其他事情有关。

我有一个 for html 查询来查找具有属性“数据绑定”的元素，并在 for 循环中循环遍历它们。从 for 循环中，我调用一个函数来通过 setter 属性绑定它们：

var cbinder = function(obj, elem, prop) {
      Object.defineProperty(obj, prop, {
        set: function(val) {
          elem.innerHTML = val;
        }
      });
    };

// 调用自

 var elem = document.querySelectorAll("[data-bind]"); 
 for (var i = 0; i < elem.length; i++) {
            var prop = elem[i].getAttribute("data-bind");
            cbinder(obj, elem[i], prop);
        }


	var obj = {};
	var cbinder = function(obj, elem, prop) {

	  Object.defineProperty(obj, prop, {
	    set: function(val) {
	      elem.innerHTML = val;
	    }
	  });
	};

	window.onload = function() {
	  var elem = document.querySelectorAll("[data-bind]");

	  for (var i = 0; i < elem.length; i++) {
	    var prop = elem[i].getAttribute("data-bind");
	    cbinder(obj, elem[i], prop);
	  }


	  var btn = document.querySelector("#chnbtn");
	  btn.addEventListener("click", function(event) {
	    obj.fname = "John";
	    obj.lname = "Doe";

	  }, false);


	};
<p>
  <span data-bind="fname">my name</span>  <span data-bind="lname">my name</span>
</p>
<p>
  <button id="chnbtn">Change Values</button>
</p>

由于我在 for 循环中调用此函数，我想我不妨将它集成到那里，但这里是我的问题出现的地方。它无法正常工作，仅在设置对象时分配最后一个值。为什么第一个示例工作正常而第二个示例失败，而我认为它们是类似的调用。有人能抓住我的好奇心吗？

   var elem = document.querySelectorAll("[data-bind]");
   for (var i = 0; i < elem.length; i++) {
        var prop = elem[i].getAttribute("data-bind");
        var el = elem[i]
        Object.defineProperty(obj, prop, {
            set: function (val) {
                el.innerHTML = val;
            }
        });
    }


    var obj = {};
    window.onload = function() {
      var elem = document.querySelectorAll("[data-bind]");

      for (var i = 0; i < elem.length; i++) {
        var prop = elem[i].getAttribute("data-bind");
        var el = elem[i]
        Object.defineProperty(obj, prop, {
          set: function(val) {
            el.innerHTML = val;
          }
        });
      }


      var btn = document.querySelector("#chnbtn");
      btn.addEventListener("click", function(event) {
        obj.fname = "John";
        obj.lname = "Doe";

      }, false);


    };
<p>
  <span data-bind="fname">my name</span>  <span data-bind="lname">my name</span>

</p>
<p>
  <button id="chnbtn">Change Values</button>
</p>

4

1 回答 1

1

您分配给属性的 setter 函数具有对变量的持久引用，而不是创建函数时的副本。因此，当调用该函数时，它会尝试使用循环中的最后一个值。elel

你的原始代码，把它放在一个函数中，是要走的路。

于 2015-02-25T06:49:25.273 回答