Hello,
I am exploring building mvvm custom widgets. Although there is a clear example using a dataSource in the blogs, I want to bind my widget to an ObservableObject viewmodel.
My view model is simple:
My custom widget shall display an information box with an icon defined by the type (info, warning, error, success) and the text message like in the resulting code below (styles not included).
To achieve that, the body of my web page looks like this:
I have some script to bind the view model to the body:
and I have implemented my custom widget as follows:
The issue I am facing is how can I access the viewModel the body of the page is bound to from within my custom widget?
I am exploring building mvvm custom widgets. Although there is a clear example using a dataSource in the blogs, I want to bind my widget to an ObservableObject viewmodel.
My view model is simple:
var
viewModel = kendo.observable({
message: {type:
"info"
, text:
"Hello World!"
}
});
My custom widget shall display an information box with an icon defined by the type (info, warning, error, success) and the text message like in the resulting code below (styles not included).
<
div
id
=
"myMessageBox"
>
<
img
src
=
"./images/infoIcon.png"
alt
=
"Hello World!"
/><
span
>Hello World!</
span
>
</
div
>
To achieve that, the body of my web page looks like this:
<
body
>
<
div
id
=
"myMessageBox"
data-role
=
"infobox"
data-type
=
"message.type"
data-text
=
"message.text"
></
div
>
</
body
>
I have some script to bind the view model to the body:
kendo.bind($(
"body"
), viewModel);
and I have implemented my custom widget as follows:
; (
function
($, undefined) {
"use strict"
;
var
kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var
InfoBox = Widget.extend({
init:
function
(element, options) {
var
that =
this
;
options = options || {};
kendo.ui.Widget.fn.init.call(that, element, options);
that._infoBox();
},
options: {
name:
"InfoBox"
,
type:
"info"
,
//warning, error, success
text:
'Default message for an information box'
,
infoIcon:
'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/info/infoIcon32.gif'
,
warningIcon:
'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/notice/noticeIcon32.gif'
,
errorIcon:
'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/error/errorIcon32.gif'
,
successIcon:
'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/success/successIcon32.gif'
,
autoBind:
true
},
type:
function
(value) {
var
that =
this
;
if
(value) {
//check value is info, warning, error or success
that.options.type = value;
//that._refresh();
return
;
}
else
{
return
that.options.type;
}
},
text:
function
(value) {
var
that =
this
;
if
(value) {
//check value is of type string
that.options.text = value;
//that._refresh();
return
;
}
else
{
return
that.options.text;
}
},
_infoBox:
function
() {
var
that =
this
;
that._refresh();
},
_template:
'<img src="{0}" alt="#:{1}#" /><span>#:{1}#</span>'
,
_refresh:
function
() {
var
that =
this
;
var
template = kendo.template(kendo.format(that._template, that.options.infoIcon, that.options.text));
//How can I find the viewModel the body is bound to??????
//$(that.element).html(template(viewModel));
}
});
ui.plugin(InfoBox);
})(jQuery);
The issue I am facing is how can I access the viewModel the body of the page is bound to from within my custom widget?