rivets.js正在尝试使自定义适配器正常工作

Question

我正在尝试让一个自定义适配器与rivets.js一起工作，但它既不会更改模型，也不会调用例程。如果有人也在使用rivets.js，我可以在这方面得到一些帮助：

JsFiddle Example Code

​

var menuContext = {
  menu: {
    watchList: {
      status: false,
      view: function() {
        // call other view
      }
    },
    profile: {
      status: false,
      view: function() {
        // call other view
      }
    }
  }
};

rivets.binders['on-select-item'] = {

  bind: function(el) {

    var adapter = rivets.adapters[rivets.rootInterface];
    var model = this.model;
    var keypath = this.keypath;
    var that = this;
    this.callback = function(ev) {
      ev.preventDefault();
      var value = adapter.get(model, keypath);

      var newValue = !value;

      adapter.set(model, keypath, newValue);

    };
    el.addEventListener('click', this.callback);
  },
  unbind: function(el, value) {
    el.removeEventListener('click', this.callback);
  },
  routine: function(el, value) {

    console.log('I am only being called once!');
  
    value ? el.classList.add('enabled') : el.classList.remove('enabled');
  }
};

var menu = document.querySelector("#menu");


rivets.bind(menu, menuContext);

#menu .enabled {
  background-color: green;
}

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<ul id="menu">
  <li>
    <a href="#" role="button" rv-on-select-item="menu.watchList.status">
    Item 1, value should toggle (true|false) <span rv-html="menu.watchList.status"></span>
		  		</a>
  </li>
  <li>
    <a href="#" role="button" rv-on-select-item="menu.profile.status">
		    		Item 2, value value should toggle (true|false) <span rv-html="menu.profile.status"></span>
		  		</a>
  </li>
</ul>

​

Answer 1

这里的keypath是您在模板中指定的完整路径字符串，但是您的模型是持有keypath中的最后一个属性的对象(不要问我为什么，这就是调试时的方式)，并且查看source code of default adapter，它似乎没有进行任何遍历：

get: function(obj, keypath) {
  return obj[keypath];
},
set: function(obj, keypath, value) {
  return obj[keypath] = value;
}

因此，您必须自己解析keypath。在这种情况下，如下所示：

​

var menuContext = {
  menu: {
    watchList: {
      status: false,
      view: function() {
        // call other view
      }
    },
    profile: {
      status: false,
      view: function() {
        // call other view
      }
    }
  }
};

rivets.binders['on-select-item'] = {

  bind: function(el) {
    var adapter = rivets.adapters[rivets.rootInterface];
    var model = this.model;
    var keypath = this.keypath;
    var that = this;
    this.callback = function(ev) {
      ev.preventDefault();
      var key = keypath.split('.').slice(-1);
      var value = adapter.get(model, key);
      var newValue = !value;
      adapter.set(model, key, newValue);
    };
    el.addEventListener('click', this.callback);
  },
  unbind: function(el, value) {
    el.removeEventListener('click', this.callback);
  },
  routine: function(el, value) {

    console.log('I am only being called once!');

    value ? el.classList.add('enabled') : el.classList.remove('enabled');
  }
};

var menu = document.querySelector("#menu");


rivets.bind(menu, menuContext);

#menu .enabled {
  background-color: green;
}

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<ul id="menu">
  <li>
    <a href="#" role="button" rv-on-select-item="menu.watchList.status">
    Item 1, value should toggle (true|false) <span rv-html="menu.watchList.status"></span>
		  		</a>
  </li>
  <li>
    <a href="#" role="button" rv-on-select-item="menu.profile.status">
		    		Item 2, value value should toggle (true|false) <span rv-html="menu.profile.status"></span>
		  		</a>
  </li>
</ul>

​

我知道你在官方网站上关注双向绑定example，但是这个库似乎已经有了重大的更新。如果你想知道“为什么”，更好的地方是github repo，作者可以在那里给出一些见解。