Javascript 角度范围。$watch（）相当于铆钉.js

在angularjs

scope中，$watch（）

可用于在每次变量值更改时执行函数

scope.$watch('myvar', function(newValue, oldValue) {
  changeCallback();
});

（angularjs示例仅用于显示我想要做的事情。我只想使用rivets.js，而不是angularjs。）

我可以在可以更改值的元素上使用事件监听器，但是我必须在变量值可能更改的任何地方都使用事件监听器

<input type='text' rv-on-change='changeCallback' rv-value='myvar'>

问题：是否有一种方法可以在rivers.js中每次变量值更改时执行函数，而不在值更改的另一端添加任何代码？

在这里找到了解决方案。您需要使用sightglass wich，它是铆钉的依赖项，包含在rivets.bundled.min.js中

// configure sightlass with same adapters as rivets
sightglass.adapters = rivets.adapters;
sightglass.root = '.';

// listen for changes on list.val 
// list is an object and val is property to listen for changes on
sightglass(list, 'val', function() {
  log('value changed...');
});

下面是codepen上的一个工作示例

这是同一个示例的代码

html

{list.val}



重置

js

var log=函数（msg）{
$（'#log'）。前置（''+msg+''）；
};
变量列表={
瓦尔：1
，重置：函数（）{
日志（'单击重置…'）；
list.val=1；
}
};
var a=rivets.bind（$（'#app'），{list:list}）；
sightglass.adapters=铆钉.adapters；
sightglass.root='；
SINGTGLASS（列表'val'，函数（）{
日志（'值已更改…'）；
});

创建一个自定义指令并绑定范围。$watch在那里可以找到rv值的变化。我试图通过添加我只想使用rivets.js而不使用angularjs来让问题更清楚。谢谢你的评论！

// configure sightlass with same adapters as rivets
sightglass.adapters = rivets.adapters;
sightglass.root = '.';

// listen for changes on list.val 
// list is an object and val is property to listen for changes on
sightglass(list, 'val', function() {
  log('value changed...');
});

<div id='app'>{list.val}<br>
<input rv-value='list.val'><br>
  <button rv-on-click='list.reset'>Reset</button>
</div>
<div id='log'></div>

  var log = function(msg){
    $('#log').prepend('<div>'+msg+'</div>');
  };

  var list = {
    val: 1
    , reset: function(){
      log('Clicked reset...');
      list.val = 1;
    }
  };
  var a = rivets.bind($('#app'), {list: list});

  sightglass.adapters = rivets.adapters;
  sightglass.root = '.';

  sightglass(list, 'val', function() {
    log('value changed...');
  });