角度范围$watch(）等效于Rivets.js

Angular scope.$watch() equivalent in Rivets.js

本文关键字：Rivets js 范围 watch      更新时间：2023-09-26

在angularjs中，scope.$watch()可用于每次变量值发生变化时执行函数。

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

（angularjs示例只是为了显示我想做什么。我只想使用rivets.js，而不是angularjs.）

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

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

或者，如果值从javascript代码中更改，我也必须从那里执行更改函数。

myvar = 'changed value';
changeCallbacl()

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

在此处找到解决方案http://jsfiddle.net/nsisodiya/2mkjx44j/。您需要使用瞄准器，它是铆钉的依赖项，并包含在铆钉.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的工作示例http://codepen.io/mstadius/pen/azroda

这是相同样本的代码

html

<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>

js

  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...');
  });
相关文章：