jQWidgets Forums

Tagged: Knockout ApplyBindingsToNode

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Apply Bindings to Node (Dynamic Binding with Knockout) Posts
July 10, 2014 at 3:18 pm Apply Bindings to Node (Dynamic Binding with Knockout) #57015

Stephen Agius
Participant

Hi,

I am trying to bind jqxWidgets to Knockout yet I do not want to bind any widget directly from the html.

I would like to bind some properties, which can be strings, datetimes, selection etc. with knockout but in a dynamic way.

Template Direct Binding <input type=”text” data-bind=”jqxInput: {
disabled: true,
height: 28,
rtl: false,
theme: ‘metro’,
value: null,
width: 212
}” />

Dynamic Knockout Binding

<input type=”text” /> <– In Template

var vm = { value: null };
ko.applyBindings(vm);

ko.applyBindingsToNode($(‘input’)[0], {
jqxInput: {
disabled: true,
height: 28,
rtl: false,
theme: ‘metro’,
value: value,
width: 212
}
}, vm);

JQuery Binding

$(input).jqxInput({
disabled: true,
height: 28,
rtl: false,
theme: ‘metro’,
value: vm.value,
width: 212
});

When I try to dynamically applyBindingsToNode, the jqxInput takes much more time to bind and render compared to when binding via jQuery.

Below, I am sending an example:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>Integration of jqxInput with Knockout.</title>
<link rel=”stylesheet” href=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/json2.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-3.0.0.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxknockout.js”></script>
<script type=”text/javascript” src=”http://underscorejs.org/underscore.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var start = new Date();
var end;
_.each($(‘input’), function (input, index) {
/*ko.applyBindingsToNode(input, {
jqxInput: {
disabled: true,
height: 28,
rtl: false,
theme: ‘metro’,
value: null,
width: 212
}
}, this);*/

$(input).jqxInput({
disabled: true,
height: 28,
rtl: false,
theme: ‘metro’,
value: null,
width: 212
});
});

end = new Date();

var totalTime = end – start;

console.log(totalTime);
});
</script>
</head>
<body style=’font-size: 13px; font-family: Verdana;’ class=’default’>
<div>
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
<input type=”text” />
</div>
</body>
</html>

Can you please give me an opinion what I am doing wrong when trying to bind a widget via knockout?

With JQuery, this is taking around 315ms.
With Knockout, this is taking around 1013ms.

While waiting for your kind help and reply,

Regards,

Stephen Agius

July 11, 2014 at 4:28 am Apply Bindings to Node (Dynamic Binding with Knockout) #57030

Peter Stoev
Keymaster

Hi Stephen Agius,

The KO bindings which we support are available on this page: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/index.htm. We do not support functionality which is not demonstrated on that page. In general, binding through KO vs creating the widget in the standard way will take more time due to the usage of additional framework.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.