Binding and unbinding widgets

[Jaap]

kendo.bind() binds the element and all child elements to the viewModel by calling bindElement.
bindElement calls first unbindElement so that works fine if you call kendo.bind() multiple times, e.g. when you want to bind another model to your markup.
But bindElement also creates widgets if an element has a data-role attribute.
unbindElement on the otherhand does not destroy the element. So bindElement will again create the widget when you call kendo.bind() a second time. Should there not be a check if the widget is already created?

So
1) In the bindElement (or somewhere deeper) should bet checked if the widget is already created and if so do not create again
2) Add a parameter to kendo.unbind() to optionally destroy the widgets.
        a) This would be a perfect oppertunity to destroy dom elements like the popup of a dropdownlist ( see http://www.kendoui.com/forums/ui/dropdownlist/how-to-clean-up-dropdownlist-lists.aspx#1991068)
        b) By making it optional you have the oppertinity to keep all your widgets and just only bind a new (view)model to your markup.

Regards, Jaap

[Atanas Korchev]

Hello,

 Here is an excerpt from the initWidget method which is responsible for instantiating a widgets by role:

 result = $(element).data("kendo" + widget.fn.options.name);

 if (!result) {
     result = new widget(element, options);
 } else {
     result.setOptions(options);
 }

This should avoid creating a widget if there is one already created. Could it be the problem reported in your other thread - that kendo.init also traverses the DOM tree?

Regards,
Atanas Korchev
the Telerik team

[Jaap]

Ok, you are right.
I concluded this because it called initWidget. But I didn't see that check at the end of the function.
So issue 1 is not applicable.
But issue 2 is still valid as a feature request, I think.

Regards, Jaap

[Atanas Korchev]

Hello,

 This is indeed an option however it would cause problems in some cases. Imagine that the widget is initialized first and then kendo.bind is called. Destroying and recreating the widget in this case would be a performance hit.

 Another problem is that the Kendo widgets do not support destroying at the time being. You could cast your vote for this user voice item.

All the best,
Atanas Korchev
the Telerik team

[Jaap]

Regarding this code in initWidget:

result = $(element).data("kendo" + widget.fn.options.name);

if (!result) {
   result = new widget(element, options);
} else {
   result.setOptions(options);
}

If the widget exists it is not created, but it's options are still set.
This should not be done, I think?
At least it gives troubles with in my case width a tabstrip.
I have this: <div data-role"tabstrip" data-animation='{"open":{"effects":"fadeIn"}}'/>
At creation of the tabstrip that animation.open is extended with duration: 200 and show: true.
But when a second time kendo.bind() is call the options on the tabstrip are set again, but the extension is not done.
So when I select a tab the activateTab function is called, then the animation.open does not have the show:true field, so my tab content will disappear.

So if after creation of a widget somehow the options are manupulated, that same manupulation should be done in the setOptions function.
Or don't calll that setOptions method at all. It would overright changes the I perhaps made to the options after creation of the widget (or can I not change options after creation? Not sure about that).

Of course in this case I can easily workaround it.

Regards, Jaap

[Atanas Korchev]

Hello,

 I guess the setOptions method is misbehaving in this case. Could you provide more code so we can reproduce that and see what went wrong?

Regards,
Atanas Korchev
the Telerik team

[Jaap]

This is indeed an option however it would cause problems in some cases. Imagine that the widget is initialized first and then kendo.bind is called. Destroying and recreating the widget in this case would be a performance hit.

Should indeed not be done automatically. You should explicititly opt-in for it when you call kendo.unbind(). In any other case, nothing should change regarding the current flow.

I will vote for it and add this in a comment.

Jaap

[Jaap]

Here you have the repro. It is based on the widgets.html from the Kendo examples.
I have also added the original widgets.html so you can easily see my changes with a compare tool.

I have added a button which does a second bind of the tabstrip.
When after clicking that click on a tab then the tab content disappears. It appears that "display: none" is still in the style and that is caused by the fact that my animation does not have a "show: true" field, which is added by the tabstrip when it is intially created.

Regards, Jaap

[Jaap]

I found the problem with the tabstrip.
Widget.init merges the options parameter with the default options of a widget.

that.options = extend(true, {}, that.options, options);

In Widget.setOptions, this line is called:

$.extend(this.options, options);

that behaves differently. If I change that line in Widget.setOptions to:

this.options = extend(true, {}, this.options, options);

it works fine.
I can imagine this can also effect other widgets.

Regards, Jaap

[Atanas Korchev]

Hi,

 Thank you for the clarification. This will be fixed as well in the official release.

Regards,
Atanas Korchev
the Telerik team

[Jaap]

I can confirm this is fixed in the release version.
Thanks, Jaap