rivets.jsが動作するようにカスタムアダプタを取得しようとしています

Question

私はrivets.jsで動作するカスタムアダプタを取得しようとしていますが、モデルを変更したり、ルーチンを呼び出すことはありません。またrivets.jsを使用しているそこに誰かがあれば、私はこの1つでいくつかの助けを使用することができます。

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

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

私はあなたが公式サイトでexampleを結合双方向に従っている知っているが、ライブラリには、以来、メジャーアップデートを持っているように見えます。あなたが「なぜ」より良い場所を知りたければ、github repoがあり、そこではいくつかの洞察が得られます。