Hi everyone,
I created a list view containing a image on right side and info on right side. And when i'm trying to add "click" function to that "li", its giving me an error. function is not defined.
bellow is my code.
html:
<div class="oj-hybrid-padding">
<oj-list-view id="expListView"
data="[[expDataProvider]]"
item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('experience_template', true)]]"
style="border-width: 1px 0px 0px 0px"
>
</oj-list-view>
</div>
<script type="text/html" id="experience_template">
<li data-bind="click: getDetails, attr: {id: $data['id']}">
<div class="oj-flex animateFlex">
<div class="oj-flex-item oj-margin oj-sm-only-hide oj-md-2">
<div class=" oj-flex oj-sm-justify-content-center" style="padding-left: 20px">
<img data-bind="attr:{id: id+'_logo',src: 'images/experience/'+id+'.png', alt: sname+' logo'}" style="height: 100px; border-radius: 15px;"/>
</div>
</div>
<div class="oj-flex-item oj-flex oj-margin">
<div class="oj-flex-item oj-padding">
<div class="role" data-bind="text: role"></div>
<div class="degree" data-bind="text: name"></div>
<div class="dates" data-bind="text: sdate + ' to ' + edate"></div>
</div>
</div>
</div>
</li>
</script>
js:
function CustomerViewModel() {
var self = this;
var data = [{
"id": "j1",
"name": "abcde",
"sname": "wp",
"role": "Developer-1",
"sdate": "09/16/2016",
"edate": "Present"
},
{
"id": "j2",
"name": "fghij",
"sname": "ss",
"role": "Developer-2",
"sdate": "09/01/2012",
"edate": "09/28/2014"
},
{
"id": "j3",
"name": "klmno",
"sname": "sl",
"role": "Developer-3",
"sdate": "04/07/2010",
"edate": "08/31/2012"
}
];
self.expDataProvider = new oj.ArrayDataProvider(data,
{keys: data.map(function (value) {
return value.name;
})});
self.getDetails = function(data){
console.log(data);
};
}
error:
VM889:3 Uncaught (in promise) ReferenceError: Unable to process binding "click: function(){return getDetails }"
Message: getDetails is not defined
at click (eval at createBindingsStringEvaluator (knockout-3.4.0.debug.js:2936), <anonymous>:3:58)
at newValueAccessor (knockout-3.4.0.debug.js:4166)
at init (knockout-3.4.0.debug.js:4176)
at init (knockout-3.4.0.debug.js:4169)
at knockout-3.4.0.debug.js:3303
at Object.ignore (knockout-3.4.0.debug.js:1461)
at knockout-3.4.0.debug.js:3302
at Object.arrayForEach (knockout-3.4.0.debug.js:159)
at applyBindingsToNodeInternal (knockout-3.4.0.debug.js:3288)
at applyBindingsToNodeAndDescendantsInternal (knockout-3.4.0.debug.js:3168)
am i doing something wrong from the above code ?
I'm using jet 4.2.0 version on Mac