I am trying to copy the tree filtering cookbook sample to one of the page that was made from the navigation drawer template.
But it fails with:
VM10573:3 Uncaught (in promise) ReferenceError: Unable to process binding "event: function (){return {keyup:handleKeyUp} }"
Message: handleKeyUp is not defined
at event (eval at parseBindingsString (knockout-3.4.0.js:68), <anonymous>:3:72)
at init (knockout-3.4.0.js:89)
at knockout-3.4.0.js:72
at Object.w (knockout-3.4.0.js:39)
at knockout-3.4.0.js:71
at Object.q (knockout-3.4.0.js:11)
at m (knockout-3.4.0.js:71)
at k (knockout-3.4.0.js:69)
at Object.a.Rb (knockout-3.4.0.js:75)
at ojmodule.js:15
viewmodel js file is like:
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojinputtext', 'ojs/ojtree', 'knockout-postbox'],
function (oj, ko, $)
{
function viewModel1(data)
{
var self = this;
self.treeChangeHandler = function (event, ui) {
if (ui.option === 'selection') {
$.each(ui.value, function (i, val)
{
ko.postbox.publish("fontSelected",
{'id': $(ui.value[i]).attr("id"),
//.... ommited...
});
});
}
};
self.filteredData = data;
self.filter = '';
self.handleKeyUp = function()
{
self.filteredData = filterJSON(data, self.filter);
$("#tree1").ojTree("refresh");
};
self.getData1 = function (node, fn)
{
fn (self.filteredData);
};
function filterJSON(nodes, filter)
{
var result = [];
for (var i = 0; i < nodes.length; i++)
{
if (nodes[i].title.toLowerCase().indexOf(filter.toLowerCase()) > -1)
{
var clone = cloneNode(nodes[i]);
if (nodes[i]['children'])
{
var children = filterJSON(nodes[i]['children'], filter);
if (children.length > 0)
{
clone['children'] = children;
}
}
result.push(clone);
}
}
return result;
}
function cloneNode(node)
{
return {'title': node['title'], 'attr': jQuery.extend({}, node['attr'])};
}
}
$.getJSON("system_treefontdata.json",
function (data)
{
console.log("data length is " + data.length);
return viewModel1(data);
});
});
and my view is like:
<input id="filter" maxlength="30" placeholder="Type to filter"
data-bind="event: {keyup: handleKeyUp}, textInput: filter, ojComponent:{component:'ojInputText'}" type="text">
<div id="tree1" style="width: 180px;height: auto;"
data-bind="ojComponent:
{
component: 'ojTree',
initExpanded: 'all',
data: { data: {data: getData1}}
}">
</div>
If I remove whole input tag from the view html, the error now becomes
data length is 27
VM15537:3 Uncaught (in promise) ReferenceError: Unable to process binding "ojComponent: {
component:'ojTree',initExpanded:'all',selectionMode:'single',data:{ data:{data:getData1}}}"
Message: getData1 is not defined
at eval (eval at a.za.vH (ojknockout.js:22), <anonymous>:3:52)
at Object.e (ojknockout.js:20)
at Function.Pc (knockout-3.4.0.js:51)
at Function.Qc (knockout-3.4.0.js:51)
at Function.aa (knockout-3.4.0.js:50)
at Object.a.m.a.B (knockout-3.4.0.js:49)
at a.za.Vwa (ojknockout.js:22)
at a.za.q (ojknockout.js:19)
at Object.w (knockout-3.4.0.js:39)
at a.za.c.computed.disposeWhenNodeIsRemoved (ojknockout.js:20)
Would somebody point out what I am missing here?
Thank you