Can anyone explain why this
js:
var ViewModel = function() {
this.myValue = ko.observable(25);
};
ko.applyBindings(new ViewModel());
html:
<div data-bind="kendoRadialGauge: myValue"> </div>
will allow the pointer to transition nicely to the new value, when the databound value changes.
However when passing additional options, like this
js:
var ViewModel = function() {
this.myValue = ko.observable(25);
//various gauge settings omitted for brevity
this.pointerOptions = ko.computed(function() {
return { color: this.pointerColor(), value: this.myValue() };
}, this);
};
ko.applyBindings(new ViewModel())
html:
<div data-bind="kendoRadialGauge: { value: myValue, gaugeArea: gaugeOptions, pointer: pointerOptions }"> </div>
...the pointer just jumps immediately to the new value.
Knockout 2.3.0, JQuery 2.0.3, Kendo UI Dataviz 2013.2.716
When you are specifying any of the KO "tracked" options (gaugeArea, pointer, scale) the gauge gets re-drawn by KO with using the Kendo's redraw method.
In itself it shouldn't cause the lost of the transition but KO also slightly changes the gauge's value which causes the transition lost.
Source on github:
this.value(0.001 + this.value());
Removing this line from the source code fixes your problem, so I would say this is bug in Knockout-Kendo.
Related
So I have a function that changes the checkbox
somefunction() {
d3.select("input").property("checked", true);
}
and in another function I have that detects a change in the checkbox like this:
d3.selectAll("input").on("change", change);
The problem I have is when it changes the checkbox without me clicking on it, it will not detect it as a "proper" change. What can I do to make it detect something else changing it as a "proper" change?
d3 is using the standard addEventListener in it's on method. The problem you have is that changing the checked property doesn't raise any events for the addEventListener to hear. The proper way would be to just call the handler yourself after setting the proptery:
var myInput = d3.select("input");
myInput.property("checked", true);
myInput.on("change")(); // call it yourself
Full working code:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<input type="checkbox" />
<script>
var checked = false;
setInterval(function(){
checked = !checked;
var myInput = d3.select("input");
myInput.property("checked", checked);
myInput.on("change")();
}, 2000);
d3.select("input").on("change", function(d){
console.log('checkbox changed');
});
</script>
</body>
</html>
The solution suggested by Mark works flawlessly however just alternatively I would also like to mention that rather than calling the event handler yourself you can trigger the event yourself and leave rest of the code as it is. The onchange event is triggered on following sequence focus-valueChange-unfocus. Now this does not happen when you change it without clicking on it, the value changes but no focus. Anyway so instead of relying on that you can just trigger onchange event yourself. I created a fiddle here which explains it. Hope it helps: https://jsfiddle.net/xcjje9r3/6/
window.clickMe = function() {
tmp = d3.select('#cbox');
if (tmp.property('checked') == false) tmp.property('checked', true);
else tmp.property('checked', false);
tmp[0][0].dispatchEvent(evt); //MANUALLY TRIGGER EVENT
}
//tmp[0][0] is becoz d3.select returns an array and [0][0] position stores the actual DOM element in this array.
window.listenerInitialize = function() {
evt = document.createEvent("HTMLEvents"); //CREATE NEW EVENT WITH TYPE
evt.initEvent("change", false, true); //THE EXACT EVENT TO FIRE
d3.select('#cbox').on('change', alerting); //ADDING LISTENER FOR EVENT
}
window.alerting = function() {
alert('testEvent');
}
I think my question is similar with this. However, event keypress on input text still not worked.
My Question here is how to add custom binding into input text box and trigger 'something' when pressing enter button.
Here is another sample when the target is kendo widget; and it's working.
HTML code:
<div id="app">
<input type="text" data-bind="keyPress: onKeyPress" />
<div id="output"></div>
</div>
Java script code:
kendo.data.binders.keyPress = kendo.data.Binder.extend({
init: function (element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
var binding = this.bindings.keyPress;
$(element.input).bind("keypress", function (e) {
if (e.which == 13) {
binding.get();
}
});
},
refresh: function () { }
});
var viewModel = kendo.observable({
onKeyPress: function () {
$("#output").append("<div>keyPress</div>");
}
});
kendo.bind($("#app"), viewModel);
Jsfiddle code:
http://jsfiddle.net/ikomangmahendra/4uL8Y/2/
Thanks in advance
The problem was connected with the following line:
before:
$(element.input).bind("keypress", function (e) {
after:
$(element).bind("keypress", function (e) {
I should bind the event to the element, not to element.input.
I have a situation where I am wanting to observe the behavior of a view model as I am populating a form. I can do this with defining a lot of fields that look kind of like the model, and binding to them, but that is kind of messy.
I am currently accomplishing this with the following code;
(function ($) {
$.printJSON = function(value){
return JSON.stringify(value, undefined, 2);
}
})(jQuery);
var viewModel = kendo.observable({
// other fields etc
update: function (e) {
e.preventDefault();
$("#json_result").html($.printJSON(this));
}
});
<div style="width: 400px; float: left; padding-left: 15px;" >
<button data-bind="click: update" value="Update" >Update</button>
<pre id="json_result">
</pre>
</div>
So you click the button, and it runs the function to draw the view model JSON to the screen, all nice and formatted.
But this still requires a button click. While that isn't that big of a problem for me, since this isn't something I need for a lot of situations, is there any way to actually do this and have it update when the view model changes in any way? I tried to just bind to the function and it never updates without an explicit call, I tried binding right to the view model, and that didn't work either.
You could either simply bind the change event:
viewModel.bind("change", function (e) {
$("#json_result").html($.printJSON(this));
});
or you could use a calculated field:
var viewModel = kendo.observable({
field1: "field1",
field2: "field2",
field3: "field3",
print: function () {
// need to register for all fields so that the change event for print is triggered
for (var fieldName in this) {
if (this.hasOwnProperty(fieldName)) {
this.get(fieldName);
}
}
return $.printJSON(this.toJSON());
}
});
and bind to it with:
<pre data-bind="html: print">
See fiddle demonstrating both methods: http://jsfiddle.net/lhoeppner/S2WeB/
I´m using the http://qtip2.com/ tooltips. I want to use a hidden element, for that i´m using this code:
<script type="text/javascript">
// <![CDATA[
// Grab all elements with the class "hasTooltip"
$('.hasTooltip').each(function() { // Notice the .each() loop, discussed below
$(this).qtip({
content: {
text: $(this).next('div') // Use the "div" element next to this for the content
}
});
});
// ]]>
And under this code:
<div class="hasTooltip">Hover me to see a tooltip</div>
<div class="hidden">
<!-- This class should hide the element, change it if needed -->
<p><strong>Complex HTML</strong> for your tooltip <em>here</em>!</p>
</div>
If you hover over the "Hover me to see a tooltip", no tooltip is shown? No idea, why?
events: {
render: (event, api) ->
show: (event, api) ->
$('.qtip:visible').qtip('hide')
elements = $(api.get('content.text')).removeClass('hidden')
api.set('content.text', elements)
,
hide: (event, api) ->
}
I think its a bug in Qtip2, i had to manually remove the class
It'd be simple to add var myFx = new Fx.Slide(element); to window.addEvent('domready'...), but because I am loading "sub-pages" using AJAX, the mootools objects of these elements inside these pages need to be instantiated after have loaded fully. If I tried using domready, the element would not be found, simple because it doesn't exist yet.
I've been working around this with setTimeout(function() { ... }, 500);, but this leaves a 500ms delay between page load and element effect creation.
i.e.
<div id="foo">TextTextText</div>
<script type="text/javascript">
setTimeout(function() {
var myFx = new Fx.Slide('foo').slideOut();
}, 500);
</script>
When the page is loaded, there is a clunky 500 ms before the element goes to its default state of... erm... "slided in". (slidded in?)
A workaround exists for .hide() and .show() effects, though, since I can simply write in the html <div id="foo" style="display: none;">
I've tried approximating the "slid in" state of an element with <div id="foo" style="height: 0px; overflow: hidden;">, but then the element stays hidden like that forever, and slide() doesn't do a damn thing on it.
I feel as though I am missing something simple.
Have you tried putting the Fx.Slide instantiation in the onComplete method of your XHR call ?
Example :
var myRequest = new Request({
method: 'get',
url: 'requestHandler.php',
onComplete : function() {
var myFx = new Fx.Slide(element);
// etc ...
}
});
I ended up resolving (to my satisfaction, anyway) the problem with a quick workaround.
<div id="foo" style="display: none;">TextTextText</div>
Click me!
<script type="text/javascript">
setTimeout(function() {
var myFx = new Fx.Slide('foo').slideOut();
$('toggler').addEvent('click', function() {
if ($('foo').getStyle('display') == 'none') $('foo').setStyle('display', 'block');
myFx.slideIn();
});
}, 500);
</script>
Element is hidden in initial state, and the slideOut() effect is run after the delay, but user won't notice since element is hidden. When called, element display is set to block (if not set already), and slideIn() is called.
Set initial state:
var myFx = new Fx.Slide('foo').hide();
Then later, when you want it to appear:
myFx.show().slideIn();