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回購 ，作者可以提供一些見解。