KnockoutJS: cliques no menu de rastreamento
Acabei de começar a brincar com o KnockoutJS e é fascinante. Criei com sucesso alguns modelos para renderizar dois painéis de uma interface com menus aninhados "ul" dentr
qui estão meus modelos:
<script id="menuItemTemplate" type="text/html">
<li class='${ Class }' >
<a class='${ Class }' data-bind='click: function() { viewModel.menuClicked(Id); }'>${ Name }</a>
<ul class='${ Class }' data-bind='template: { name: "menuItemTemplate", foreach: Items }'></ul>
<li>
</script>
<script id="menuTemplate" type="text/html">
<ul class='${ Class }' data-bind='template: { name: "menuItemTemplate", foreach: Items }'></ul>
</script>
<script id="consoleTemplate" type="text/html">
<div class='${ Class }' data-bind='template: { name: "menuTemplate", data: Menu }'></div>
</script>
<h2>Application Administration</h2>
<div id="console" class="console" data-bind='template: { name: "consoleTemplate", foreach: Panels }'>
</div>
E aqui está o código simplificado para o meu modelo de exibição:
$(function () {
var viewModel = {
"Panels": [
{
"Id" : 1,
"Class": "main",
"Menu": {
"Id": 1,
"Class": "file",
"Name": "File",
"Items": [{
"Id": 1,
"Class": "open",
"Name": "Open",
"Items": []
}]
}
}]
};
$.ajax({
url: 'console.asmx/Initialize',
type: "POST",
cache: false,
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (data) {
viewModel = data.d;
viewModel.menuActive = ko.observable(false);
viewModel.currentMenu = ko.observable(0);
viewModel.menuClicked = function (id) {
viewModel.menuActive(true);
viewModel.currentMenu(id);
};
ko.applyBindings(viewModel);
}
});
});
Até agora, os painéis e os menus são renderizados, mas agora preciso saber em qual menu foi clicado e mostrar o submenu, além de outros elementos da interface do usuário com base no menu clicado. A função anexada aos hiperlinks está lançando uma exceção:'Uncaught ReferenceError: viewModel is not defined'
quando clico em qualquer um dos hiperlink
Também tentei vincular a visibilidade dos submenus à propriedade "currentMenu" do viewModel, mas isso quebrou tudo:
<script id="menuItemTemplate" type="text/html">
<li class='${ Class }' data-bind='visible: viewModel.menuActive && viewModel.currentMenu == Id'>
<a class='${ Class }' data-bind='click: function() { viewModel.menuClicked(Id); }'>${ Name }</a>
<ul class='${ Class }' data-bind='template: { name: "menuItemTemplate", foreach: Items }'></ul>
<li>
</script>
Como vincular adequadamente o manipulador de eventos click, bem como a visibilidade com base no menu clicado?