gvas / knockout-jqueryui Goto Github PK

With knockout-2.3.0 I am unable to get the accordion binding to work on the same element as a foreach binding.

An exception is thrown from knockout-2.3.0.js:

"Multiple bindings (foreach and accordion) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element."

The animation seems to start but after a fraction of a second the handle jumps to the end position.
http://jsfiddle.net/z75NR/

The JQUI docs say you must call "refresh" if you alter the input status.. I was expecting knockout-jqueryui to do that for me:

$(el).button('refresh');

When extending the dialog binding ko v3.0 throws the following error: You cannot apply bindings multiple times to the same element. However the dialog stays fully functional.
Ko v2.3 does not throw an error.

ko v2.3.0: http://jsfiddle.net/QJj7s/4/
ko v3.0.0: http://jsfiddle.net/QJj7s/3/

Wherever I use the following binding
accordion: {autoHeight: false}

autoHeight is not being applied. Doing the same with direct jquery like

.accordion({ autoHeight: false })

works without any problem

Thanks

Hi gvas,

I'm incorporating a number of JQuery widgets from the plugins into my project and thought it would be great to use your bindingFactory to create bindings for them just like you did for the basic JQueryUI widgets.

I'm looking at your examples to figure this out but it would be great if you could create a simple page documenting on how one could go about creating custom bindings and all the various options that might go with it.

Thanks.

I get the following error when using Knockout 3.1.0

Uncaught Error: This version of the knockout library is not supported.

Descendant bindings of a button widget are only evaluated once, afterwards they are not updated anymore. The reason might be that the descendant bindings are initialized before the widget, but then the widget modifies the DOM.

http://jsfiddle.net/59v2q/1/

When changing the value of a selectmenu, the underlying observable does not change. If listening to the the "change" event on the selectmenu, and triggering a "change" event on the underlying select element, it does then work.

Hi,

I am using knockout-jqueryui in my SPA application (Hot Towel template). I am able to use the knockout-jqueryui datetime picker on my view, but need help in getting the following:

1. Set the date value.
2. Provide mask characters for users to type in the date in the input text box.

        <input type="text" data-bind="datepicker: {
                                        onSelect: onDOBSelect,
                                        maxDate: maxDate,
                                        defaultDate: defaultDate,
                                        buttonImage: calendarImageUrl,
                                        buttonImageOnly: true,
                                        showOn: 'both',
                                        dateFormat: 'mm/dd/yy'}" />  

The viewmodel has the variables defined thats used in the datepicker.

Thanks in advance.

Vik

jquery-ui 1.12 introduce a new API for buttons and knockout-jqueryui is still based on the old one.

Autocomplete does not let you bind extension points eg _renderItem

The Tabs binding causes serious memory leak.

I have a observableArray the contains tabObjects.
Now i can add and remove tabs from this array.

If you watch the application in chrome task manager the memory keeps growing even after removing the tabs from the observableArray.

this is a serious issue for me because i am building a single page app that will be running for a long time without refreshing. It retrieves it's data by making ajax calls.

look at this fiddle
http://jsfiddle.net/Pyf6c/4/

I have been playing with the buttonset demo on your documentation page (added a few radios via your button)

Is it just me, or are the various buttons states a bit unpredictable?

It seems like there's at least 4 states:

blank button background (chocolate text color)
slight off-white background (with black text color)
dark chocolate selected state (white text)
dark chocolate on-hover - (but only when hovering over 1st state mentioned above)

I'm quite new in requirejs.
Everything works fine, when not optimized, but I get that error after optimizing with r.js. I think it's because jquery-ui is AMD compatible and is not loaded when kojqui asks for it. Have tried shim thing and everything I could google.

Not sure if it's an issue with knockout-jquery per say, I'm looking for some guidance.

I just want to hook into a click event when one of the button set buttons is clicked, instead the click is fired when the button set is created.

<div id="categories" data-bind="buttonset: { refreshOn: categories }">
    <!-- ko foreach: categories -->
    <input type="radio" data-bind="attr: { id: id }, event: { click: click_event($data) }" name="category"/>
    <label data-bind="attr: { 'for': id },text: display"></label>
    <!-- /ko -->
</div>

Any ideas?

Here is a working fiddle, look in console for output.
http://jsfiddle.net/Yj8sG/2/

Thanks

We (mosaico editor)[https://github.com/voidlabs/mosaico/] depend on the latest master, which is unreleased.

We use a (fork)[bago/knockout-jqueryui#9452901885186c94f97b34535374cbe31405a882] just because of this...

See voidlabs/mosaico#3

This doesn't need code changes, just new release number + build + push built code.

It's not documented that the factory interface is available for custom ui widgets:

ko.jqui.bindingFactory.create({
  name: 'customwidget',
  options: ['option1', 'option2'],
  events: ['event1']
});

When the underlying observable changes, say when tied to a text field, the select menu does not change to that value.

Hello,

I'm experimenting with your library however I can't seem to get the datepicker to update when the observable changes. How do I specifically bind the datepicker to update?

I've put together a jsfiddle example to illustrate what I mean.
http://jsfiddle.net/EZD3k/

If you select a date, the span and both inputs correctly represent it. However, if you go to the "change my observable" input and change the date in it, the input corresponding to the datepicker isn't updated.

How do you bind the datepicker such that it correctly updates when the observable changes?

Thanks for your help as well as your excellent library,

Denis

When using a button widget in conjunction with the standard disable binding the button does not properly get disabled. The binding just changes the attribute but does not alter the classes.

http://jsfiddle.net/22xPn/1/

This is probably also the case for other widgets but I haven't tested it.

with tabs, I can set an observable to the selected tab, using "active" or "selected"

but with buttonset, I do not see a way to set an observable to the selected button.

I see you've fixed up the events to get bound to the viewmodel, but the following binding does not work correctly:

<div data-bind="dialog: { isOpen: $root.isEditMode, buttons: { Save: $root.save} }"></div>

In the save function, this is bound to the jquery dialog, not the viewmodel.

I "may" be missing something. I can change the datepicker values when I update the model manually (via console), but when the datepicker itself is changed, it does not update the model. I can work around this by setting the model value in the onSelect event. But, it seems that this should be unnecessary.

<script>
var model= function(data){
        var self = this;
        self.checkInDate = ko.observable(data.CheckInDate);
        self.checkOutDate = ko.observable(data.CheckOutDate);
}
</script>

<div id="checkIn" data-bind="datepicker: {
    value: checkInDate,
    minDate: '+2w',
    showOtherMonths: true,
    selectOtherMonths: true,
    changeYear: true,
    changeMonth: true,
    onSelect: function (selectedDate) {
        $('#checkOut').datepicker('option', 'minDate', selectedDate);
    }
}"></div>
<div id="checkOut" data-bind="datepicker: {
    value: checkOutDate,
    minDate: '+15d',
    showOtherMonths: true,
    selectOtherMonths: true,
    maxDate: '+12M',
    changeMonth: true,
    onSelect: function (selectedDate) {
        $('#checkIn').datepicker('option', 'maxDate', selectedDate);
    }
}">

Using:
Knockout 3.2.0
Knockout-jqueryui 2.2.2
Jquery 1.8.2
Jquery 1.11.1
Chrome Latest

Let me know if there are any incompatibilities, missing elements, or if this is a bug.

Thanks,
Brian

Can you please provide a sample on how to implement two different tabs each with their own template?

Afaik it's not possible to set default properties for a widget binding. It's possible to set custom default values for all widget instances, but not for just those created by the ko bindings:

$.extend($.ui.dialog.prototype.options, {
  autoOpen: false,
  width: 600,
  modal: true,
  draggable: true,
  resizable: false,
  show: { effect: "fade", duration: 100 }
});

It would be handy to have access to the widgetOptions inside the preInitHandlers.

Hi!

I've noticed that selectmenu doesn't work correctly when it's included on a dialog. It seems that selectmenu needs special treatment. A simple "refresh" won't work, apparently it needs destroyed and re-created when the dialog is shown, or else either it shows the dropdown behind the dialog, or it throws an error.
So, I've added an additional parameter to the selectmenu, called "recreateOn". This can be set to a ko observable, which when changed will cause the selectmenu to be destroyed and recreated. In my setup I update this observable when the dialog is opened.

eg:

selectmenu: { width: 200, refreshOn: $data.CMIHeaderFormID.options, recreateOn: $data.dialogFullyOpen }

This is then added to the Selectmenu.prototype.update function as such:

if (allBindingsAccessor().selectmenu.hasOwnProperty('recreateOn')) {
                var hook = ko.utils.unwrapObservable(allBindingsAccessor().selectmenu.recreateOn);
                $(element).selectmenu('destroy');
                BindingHandler.prototype.init.apply(this, arguments);
            }

Might be a bit hacky, but seems to work!

The package.json file does not contain a 'main' field, this makes it difficult to use the module with npm/webpack. the bower.json contains the main field.

When there's markup (such as a span) inside a button, and the markup's text is bound to an observable, changes to the observable are not reflected in the appearance of the button.

<input type="edit" data-bind="value: caption, valueUpdate: 'afterkeydown'"/>
<button data-bind="button: {}">
  <span data-bind="text: caption"></span>
</button>

var Model = {
    caption: ko.observable('caption'),
};
ko.applyBindings(Model);

When the edit box changes, the button's caption should change accordingly. Instead, the button continues to display whatever the initial value of Model.caption is set to.

Demonstration here: http://jsfiddle.net/rkennedy/YFcE7/

              if (allBindingsAccessor().valueUpdate) {
                    /*jslint unparam:true*/
                    this.on(element, 'spin', function (ev, ui) {
                        value.value(ui.value);
                    });
                    /*jslint unparam:false*/
                } else {
                    this.on(element, 'change', function () {
                        value.value($(element)[widgetName]('value'));
                    });
                }

If you bind on "spin" you receive only spin notifications while you don't get any event on mouse "wheel" or simple keyboard "change" (enter/focusout after writing anything).

I guess the fix is to always liste on change but also add the spin event when you declare on of the other parameters.

the "valueUpdate" from "value" binding supports string or an array of events to listen. Maybe a good option would be to support something similar, so that it is more futureproof and you can specifically bind to spin and change or spin and keypress depending on your preferences.

When the date value is entered manually to the input field the date value in the text field and in the date picker is changed but not the view model which is bound to the text input.

Steps to reproduce the issue

• Change the input field value to some other date by manually typing in the date in the text field.
• Observe that the datepicker auto selects the date which is entered and don't click on focused date.
• Focus out from input box. Check that the observable value still unchanged and it is different from value in the input field.

Please check the below example.
http://jsfiddle.net/nvnvenki/bfbnxwx9/

I had the same issue as this stack overflow when I use the knockout-jqueryui tabs binding.

http://stackoverflow.com/questions/8056610/jquery-ui-tab-init-after-array-change-in-knockoutjs

Then I added RPs binding like this:

<div id="tabs" data-bind="jqTabs: kpis, tabs: { refreshOn: kpis, active: $root.selectedKpiTab }">

and my issue is fixed.

So I wonder if RP's binding handler jqTabs from that SO question can be added into the knockout-jqueryui binding handler so that the tab control is destroyed and rebuild when the tabs list changes?

Minor issue - jQuery buttonset destroy takes care of destroying the buttons within it, but when

$(element)[widgetName]('destroy');

is called for the button binding itself jquery will throw the following error "cannot call methods on button prior to initialization; attempted to call method 'destroy'"

http://gvas.github.io/knockout-jqueryui/install.html

'knockout-jqueryui': '/lib/knockout-jqueryui'

Should be 'knockout-jqueryui': '/lib/knockout-jqueryui/dist/amd' if it's to match the structure of the actual repo.

Understand you've simplified it and given the directory structure used, however now-a-days no one copies individual files into new structures but instead uses the repo itself via Bower or the like.

In our project we use both Bootstrap and jQuery UI. Its a well known issue that button and tooltip conflict. In our project we use the widget factory bridge method to map the tooltip and button methods to another name.

$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

This allows us to create a tooltip with the call $(element).uitooltip();

To get your binding to work we must make a change in the anonymous function that calls the binding factory for the tooltip. We must change the name of the binding from BindingHandler.call(this, 'tooltip'); to BindingHandler.call(this, 'uitooltip');

Its a minor change in the source code but it is a change. It would be nice to have a solution that works even when there are conflicts.

One possible solution:
Create a widget bridge with a differently named function and store the new widget functions name.
Instead of accessing the jQuery UI function like this $(element)[this.widgetName] use the bridged widgets function name.
This would allow you to keep the binding as data-bind="{widgetName}: ..." yet avoid conflicts.

I'm working on a pull request but I'm not experienced with jQuery UI or this factory pattern you're using. It should at least give you an idea of what I'm going for.

Hi ,

I m using Hot Towel template from john papa.

I tried to make a simple Jquery UI button and have been trying for last one week but the template does not allow me to do so.

First thing first inside main.js i changed the sequence so that jquery loads after but it did not help.

require.config({
paths: { "text": "durandal/amd/text" },
shim: {
"jqueryui": {
"deps": ["bootstrap"]
}
});

I tried to achieve the jquery UI button by trying to call button rendering inside viewAttached and that did not work.

viewAttached: function ()
{
$("#mybutton")
.button()
.click(function (event) {
event.preventDefault();
});
}

I tried with 3rd approach through knockout and only thing that works is DatePicker.

All my observation was that css style is not available to the component.

Either Bootstrap overrides or some thing gets messsed.
Can u pls comment on this.

Br

Neo

Nice job on this integration library especially the abstraction of the bindingFactory. Makes adding and maintaining the widgets really simple. It's the main reason what swung me to committing to incorporating your library into our production code base.

Speaking of which, I've recently started a new project with Knockout and JQueryUI widgets so your library came in really handy and I'm very happy with how it's currently going. I'm also using the RequireJS library for dependency management so I refactored your code to work as AMD-style modules which has the nice benefit of not creating any extra global variables and not depending on global variables (ie. JQuery, Knockout, and JQuery-UI). Instead, these are requires that must be satisfied by configuring requireJS in the encompassing project. (though is a very simple step)

Anyway, what I was wondering if you are interested in incorporating this refactoring into your main repo so that others can also make use of it. It would take a bit of work to figure out how to make the library use requireJS when present and use globals as a fallback (I have seen this type of pattern with other libraries, for example: Knockout itself uses it, see: http://knockoutjs.com/documentation/amd-loading.html)

Let me know what you think.

Cheers,

Tomas

I've got a div with the following data-bind set up (outer tag redacted because I couldn't get it to show with markdown without a fight):

'''
data-bind="dialog: {resizable: true, title: windowTitle, width: width, height: height, position: position }"
'''

I have a number of the following javascript objects bound to the documentWindow class div shown above:

'''
var windowManager = function (options) {
var self = this;

var data = $.extend({
    width: 250,
    height: 250,
    documentName: '',
    documentType: '',
    position: {
        my: 'left top',
        at: 'left-top',
        of: '#dashboard'
    }
}, options);

self.width = ko.observable(data.width);
self.height = ko.observable(data.height);
self.documentName = ko.observable(data.documentName);
self.documentType = ko.observable(data.documentType);
self.isOpen = ko.observable(data.isOpen);
self.windowTitle = ko.computed(function() {
    return self.documentName() + ' - ' + self.documentType();
});

'''

Now, I can verify that these properties are being bound. I can see the window title, for instance, and the width and height is set appropriately when binding first occurs. After that, moving the dialogs and/or resizing them is not reflected in the bound objects. Any suggestions?

Just a heads up.

I had an issue when using Knockout JS version 3.0.0rc. It seems that the "rc" causes the internal variable "versions.knockout" to be undefined. I fixed the issue by downloading KnockoutJS version 3.0.0 and that fixed the issue. Below is the code where I ran into the issue:

The error I received was " throw new Error('knockout must be loaded before knockout-jquery.');"

(function () {


    // dependency checks
    if (!versions.jQuery) {
        throw new Error('jQuery must be loaded before knockout-jquery.');
    }
    if (!versions.jQueryUI) {
        throw new Error('jQuery UI must be loaded before knockout-jquery.');
    }
    if (!versions.knockout) {
        throw new Error('knockout must be loaded before knockout-jquery.');
    }

    if (versions.jQueryUI !== '1.8' && versions.jQueryUI !== '1.9' && versions.jQueryUI !== '1.10') {
        throw new Error('This version of the jQuery UI library is not supported.');
    }

    if (versions.knockout !== '2.2' && versions.knockout !== '2.3' && versions.knockout !== '3.0') {
        throw new Error('This version of the knockout library is not supported.');
    }
}());

When upgrade to KO 2.3 this error message "Uncaught Error: You cannot apply bindings multiple times to the same element" appears in the console when binding a jQuery UI Dialog. It appears as though the 2.3 update added the check for this scenario. While the bindings still work it would be nice to not have this appear in the console.

Heres a JSFiddle example with 2.3.0
http://jsfiddle.net/NuBpb/1/
Heres the same code with 2.2.1
http://jsfiddle.net/TYPhu/1/

I'm not familiar enough (yet) with the KO binding life cycle to fully understand the issue and a good fix. I was able to fix the code on my end by adding ko.cleanNode(element); below the ko.applyBindingsToDescendants(bindingContext, element); within the bindingFactory.create function.

I'm still new to Github so sorry if I'm not doing this properly. If I should have created a pull request please let me know and I'll do that.

So my specific use case is that I want a dialog title to be bound to not just an observable but an expression referencing an observable.

See: http://codepen.io/anon/pen/gKpin

Note the two dialog popups. One one, you can change the model value (in this example, change the value of the top input box). Upon blur, the model value is updated which updates one of the dialog box titles (the one bound straight to the model observable) but the other dialog title does not change because it is bound to an entire expression.

Upon cursory look into the code, it would seem that the culprit is the subscribeToObservableOptions() function. The code checks to see if the given property is an observable and only then creates a separate subscription (via the computed) to monitor changes to that property. I do see how that's an efficient idea.

However, if that property value is as a result of an expression, then it doesn't come up as an observable and hence no binding. A change to it though does trigger an update to the entire binding so I'm thinking that an update method could be written that calls Jquery setOption with all the options in valueAccessor(). I grant you that since there's no obvious way to tell which part of the bound value has changed (ie. which option) then all the options would have to get updated even if only changed. Not terribly efficient.

Thoughts?

BTW. In the subscribeToObservableOptions() function, you could use Object.getOwnPropertyNames(options) on the for loop and get rid of the options.hasOwnProperty(prop).

Please add bower support ,Thanks

When using the range slider the binded values don't update when moving the handlers.
The example shown on http://gvas.github.io/knockout-jqueryui/slider.html has the exact same problem.
Working with a single handle works.

Upon binding a select-tag
<select data-bind="value: colorspace, options: colorspace_choices, selectmenu: {width: 100}"></select>
to
this.colorspaces_choices = ko.observableArray(['hex', 'hsv', 'lab', 'rgb', 'xyz']); this.colorspace = ko.observable();
yields:
Uncaught Error: Unable to process binding "options: function (){return thresholder.colorspace_choices }"
Message: Multiple bindings (selectmenu and options) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element..
However - it does start to initialize the selectmenu (i.e. formats its size, style etc).

Dropping the selectmenu-clause causes the menu to remain uninitialized.

Knockout is v3.1.0
Knockout jQueryUI was pulled from GitHub yesterday.

When using the spinner widget, there are 2 different use cases. The default, is to only update the ViewModel when the input loses focus (blur). The other, is to update the VM immediately whenever the value in the spinner changes, through whatever user action (typing, up/down arrow key, page up/down, and mouse click on up/down buttons). knockout-jqueryui works fine with the former, but does not with the latter.

Here is a fiddle that demonstrates the issue: http://jsfiddle.net/LatencyMachine/CPWZe/

And here is a fiddle that demonstrates the proposed fix: http://jsfiddle.net/LatencyMachine/MrySq/

I will follow-up with a pull request containing my proposed fix for your review. Thanks for starting this very useful project.

Hi,

I've checked slider sample:
http://gvas.github.io/knockout-jqueryui/slider.html

It seems, that write function isn't working (it's not called at all). So you can change values in input fields, and that will affect slider. But if you'll try to slide, then input fields will stay the same.

Btw, really useful project ;)

Regards,
elbrus

Is there a way to setup two way binding with autocomplete. As it is autocomplete uses objects with label and value properties. What would be ideal is if the autocomplete widget could get proper two way binding with an observable, and the value of the widget was always set to the label.

Can we have sortable included?
rniemeyer implemented one here:
https://github.com/rniemeyer/knockout-sortable

I would like to be able to download knockout-jquery.min.js
I don't see a link anywhere.

Is there any plans to support the new release of knockout, version 3.1.0?