Use of Entwine

248 views

Skip to first unread message

Mikaël PIRIO

unread,

Nov 27, 2012, 5:34:27 AM11/27/12

to jquery-...@googlegroups.com

Hello,

I would like to use Entwine in a UI project. A lot of UI component are added or modified with javascript/AJAX.

I used Entwine to test it like this :

<!DOCTYPE html>
<html>
<head>
    ...

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.min.js"></script>
    <script src="js/jquery.entwine-dist.js"></script>

    <script type="text/javascript">

;(function($, window, document, undefined) {

$(document).ready( function() {
    var $mainContainer = $('#mainContainer');

    $('button').entwine({
      onmatch: function(){
        console.log('match: ', this);
        if(!this.data('button')) this.button();
      },
      onunmatch: function(){
        console.log('unmatch: ', this);
        this.button('destroy');
      }
    });

    setTimeout(
      function() {
        $('<p>Button added after 5s : <button>button 3</button></p>').appendTo($mainContainer);

        setTimeout(
          function(){
            console.log('addClass "test" to buttons');
            $('button').addClass('test');

            setTimeout(
              function(){
                console.log('removeClass "test" to buttons');
                $('button').removeClass('test');
              },
              5000
            );
          },
          5000
        );

      },
      5000
    );

});
})(jQuery, window, document);
    </script>
</head>

<body>
    <div id="mainContainer">
      <p>Button already on the HTML page : <button data-type="horizontal">button</button></p>
    </div>
</body>
</html>

It's good. I have two first log messages "match ..." corresponding to the two first "onmatch" events.

But when i modify buttons class (add and remove a 'test' class), "onmatch/onunmatch' events are not fired !?

I certainly no correctly used Entwine... Could you help me to understand why ?
Thank you.

Hamish Friedlander

unread,

Nov 27, 2012, 2:50:47 PM11/27/12

to jquery-...@googlegroups.com

Hi,

onmatch will fire for a particular entwine definition when the entwine selector becomes the most specific selector that matches for any particular element

onunmatch will fire for a particular entwine definition when the entwine _was_ the most specific selector that matched for a particular element (and so onmatch was called) but now it isn't any more

In this case adding a "test" class does not affect the most specific rule for the button element - the button still matches the "button" selector, and there is no other selector that is more specific that it also matches.

If you added a more specific rule that _does_ match .test, like so, then you'd see the button onunmatch and the button.test onmatch get called when adding the class, and the button onmatch and the button.test onunmatch get called when removing the class:

$('button.test').entwine({
onmatch: function(){
console.log('test match: ', this);
},
onunmatch: function(){
console.log('test unmatch: ', this);
}
});

There is also onadd and onremove, which are called when an element is first added to the DOM and when the element is removed from the DOM. This doesn't take into account any changes after being added to the DOM (so the element's classes and other attributes which affect which entwine selector get used must be set before adding to the DOM), but is often what people actually want.