Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daljit
115
igTextEditor, knockoutjs and custom bindings
posted

Hi,

Becuase IgTextEditor does not support knockoutjs, so i am writing custom bindings for the igtexteditor. Following is my code from the main file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../scripts/infraguistics/js/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../scripts/infraguistics/js/infragistics.loader.js" type="text/javascript"></script>
<script src="../scripts/infraguistics/js/infragistics.js" type="text/javascript"></script>
<script src="../scripts/infraguistics/js/modules/infragistics.util.js" type="text/javascript"></script>
<script src="../scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../scripts/CustomBindings.js" type="text/javascript"></script>
<link href="../css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript">
$(document).ready
(
function () {
var viewModel = function () {
this.userName = ko.observable("Daljit Singh");
};
ko.applyBindings(new viewModel());
$('#textEditor').igTextEditor({ width: 160 });
}
);
</script>
</head>
<body>
<input id="textEditor" data-bind = "executeOnLeave :userName" />
<input type = "text" data-bind = "value : userName" />
</body>
</html>

--------------------------------------------------------------------------------------------------------------------

following is code of my CustomBindings.js, logic for my custom knockoutjs

/// <reference path="knockout-2.1.0.js" />


ko.bindingHandlers.executeOnLeave = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).igTextEditor('text', value);
$('#textEditor').igTextEditor().live({ igtexteditorblur: function (evt, ui) {
var textVal = $('#textEditor').igTextEditor('text');
valueAccessor()(textVal);
}
});
},
//update the control when the view model changes
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).igTextEditor('text', value);
}
};

--------------------------------------------

It works great, but i want to work this for all the all the igtexteditor controls. So I thought I will change, '#textEditor' to $(element). $(element) works for getting and setting text value, but it does not work for assign blur event.

Any help will be appreciated.

Thanks

Parents
No Data
Reply
  • 23953
    Suggested Answer
    Offline posted

    Hi Daljit Singh,

    Sorry for the late answer.

    Attached you can find working sample on igTextEditor integration with KnockoutJS. I simply reused your code and made couple of changes.

    The first change is that I moved igTextEditor initialization before KnockoutJS model binding. Here is the code:

    Code Snippet
    1. $.ig.loader(function () {
    2.     // Initialize igTextEditor before KnockoutJS
    3.     $('#textEditor').igTextEditor({ width: 160 });
    4.     $('#textEditor1').igTextEditor({ width: 160 });
    5.     var viewModel = function () {
    6.         this.userName = ko.observable("Daljit Singh");
    7.         this.userName2 = ko.observable("Daljit Singh2");
    8.     };
    9.     ko.applyBindings(new viewModel());
    10. });

     

    Second, I changed the way binding to igTextEditor blur event is done. I used bind. In the bind function I get the value of the igTextEditor from the ui parameter of the function (For some reason  $(element).igTextEditor("text") didn't return the correct value.)

    Here is the code:

    Code Snippet
    1. init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    2.     var value = ko.utils.unwrapObservable(valueAccessor());
    3.     $element = $(element);
    4.     $element.igTextEditor('text', value);
    5.    
    6.     $element.bind("igtexteditorblur", function(evt, ui) {
    7.         // Get the value of the text editor from the ui parameter
    8.         var textVal = ui.owner.element.igTextEditor('text');
    9.         valueAccessor()(textVal);        
    10.     });
    11.     
    12. }

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc. 

    igTextEditor_knockout.zip
Children
No Data