Hello.
I run into pretty weird issue with the task, which seemed pretty
easy for me.
I have custom select jQuery plugin (http://vst.mn/selectordie/),
which turns standard SELECT into custom drop down with a number of
additional features and fallback to native control on mobile devices.
And I want to control it via can.List.
The complete workflow is to bind SELECT to can.List and then
execute jQuery plugin on SELECT to shadow it with additional DOM
element, implemented custom select look and feel. I can also operate
with list and appropriate changes should be reflected on SELECT
element in DOM. Then I need to detect these DOM changes and call
jQuery plaugin's API to update the custom select.
I wanted to wrap all these logic with can.Component. I did a try
but run into multiple issues. Here is jsfiddle: http://jsfiddle.net/jqpx04gx/2/
1. Initially I supposed to detect OPTION elements creation/deletion
using inserted/removed events (like in Tab Widget example from
reciepts -
http://canjs.com/guides/Recipes.html#section_BuildWidgets_UIElements).
However for some reason inserted/removed events do not invoked for
"option" elements. So I needed to detect elements creation
via helpers, which returns functions
(http://canjs.com/docs/can.stache.helpers.helper.html#section_Returninganelementcallbackfunction).
For deletion I did not find suitable alternative. I can just listen
directly to model rather than DOM. But in this case I need to consider
some delays (since DOM could be updated with some small delay after
model updates)
2. Since I'm handling creation for every OPTION element
individually, I need to batch updates somehow (to execute jquery
plugin API method only once and not upon every OPTION element
creation). I'm using setTimeout for. But wondering if there is a
better canjs-native way to handle this
3. I'm using simple list (list of strings, not objects). And
for some reason DOM is not updated, when I'm changing item in list
(see click handler for #changeItem). I'm looking into DOM using
inspector to discover original SELECT element (which is get hidden by
plugin). But I do not see text changes in DOM. I also wondering, if
there is CanJS way to monitor changes of DOM node's text. There is
an event to monitor attributes changes, But what about text value of
the HTML node (<option>I want to listen for changes of this text
on DOM</option>)? Right now I used helper function for.
So, summarizing everything, I was able to initialize plugin with
data from model and handle new elements insertion. However
change/delete functionality does not work for me for reason mentioned
above. And in general, I don't like the approach I finally came to
organize the code. So looking for advises if there is better way to
get all this stuff done with CanJS?
I'm using CanJS 2.2.5
Thanks in advance.
