nieten.js versucht, benutzerdefinierte Adapter zu arbeiten

Question

Ich versuche, einen benutzerdefinierten Adapter mit niet.js zu arbeiten, aber es ändert weder das Modell noch ruft es die Routine. Wenn es jemanden gibt, die auch rivets.js mit, könnte ich etwas Hilfe mit diesem verwenden:

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> 
 
\t \t \t \t </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" role="button" rv-on-select-item="menu.profile.status"> 
 
\t \t  \t \t Item 2, value value should toggle (true|false) <span rv-html="menu.profile.status"></span> 
 
\t \t \t \t </a> 
 
    </li> 
 
</ul>

Answer 1

Die keypath hier ist der vollständige Pfad Zeichenfolge angeben in Ihrer Vorlage, aber Ihr Modell hier ist das Objekt mit der letzten Eigenschaft in keypath (fragen Sie mich nicht, warum, so ist es beim Debugging) und mit Blick auf die source code of default adapter, tut es nicht scheinen dabei jede Traversal zu werden:

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

So werden Sie die keypath von selbst lösen müssen. So etwas wie die folgenden wird in diesem Fall tun:

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> 
 
\t \t \t \t </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" role="button" rv-on-select-item="menu.profile.status"> 
 
\t \t  \t \t Item 2, value value should toggle (true|false) <span rv-html="menu.profile.status"></span> 
 
\t \t \t \t </a> 
 
    </li> 
 
</ul>

Ich weiß, dass du nach dem Zwei-Wege-example bei offizieller Website zu binden, aber die Bibliothek scheint da größeres Updates bekommen zu haben. Wenn Sie wissen möchten, "warum" besser Ort wäre die github repo, wo der Autor einige Einblicke geben könnte.