rivets.js가 작동하도록 사용자 정의 어댑터를 얻으려고합니다

Question

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> 
 
\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은 사용자가 지정하는 전체 경로 문자열은 다음과 같습니다 rivets.js를 사용하여도 거기에 사람이 있다면, 나는이 일에 도움을 사용할 수 있습니다 템플릿에 있지만 여기에있는 모델은 마지막 속성이 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이 될 것입니다. 저자가 통찰력을 줄 수 있습니다.