rivets.js试图让自定义适配器工作

Question

我正在尝试使用自定义适配器来处理rivets.js，但它既不会更改模型也不会调用例程。 如果那里有人也在使用rivets.js，我可以使用这个：

JsFiddle示例代码

 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保存最后一个属性的对象（ 不要问我为什么，这是调试时的方式 ）并查看默认适配器的源代码 ，它似乎没有做任何遍历：

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> 

我知道你正在关注官方网站上的双向绑定示例 ，但是从那时起该库似乎已经有了重大更新。 如果你想知道“为什么”更好的地方将是github回购 ，作者可以提供一些见解。