Question

我一直在玩javascript Object.defineProperty来创建数据绑定。我确实得到了它的工作。我的问题与其他事情有关。

我有一个for html查询来查找属性为'data-bind'的元素，并在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>

Answer 1

您分配给您的媒体资源的setter函数有{em>持久参考到el变量，而不是副本。该功能已创建。因此，当调用该函数时，它会尝试使用循环中的最后一个值el。

您的原始代码，将其放在一个函数中，是可行的方法。

Object.defineProperty数据绑定范围

1 个答案: