knockout.jsjquery-mobile-collapsible

unable to initialize iconpos for collapsible


I have a collapsible as a list item in a listview, in a jquery mobile application.

Since I am dynamically binding to the list via knockout I have handlers which take the responsibility of initializing the listview. Hence my markup is simple.

<div data-role="page" id="p1"> 
    <div  data-role="content">
        <ul id="mylist" data-bind="foreach: items, jqmRefreshList: items">
            <li>
                <div>
                    <h2 data-bind="text: txt"></h2>
                    <p data-bind="text: desc"></p>
                </div>
            </li>            
        </ul>
    </div>    

</div> 

The binding handler is written like this:

ko.bindingHandlers.jqmRefreshList = {
    update: function (element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor());
        try {
            console.log('executed');
            console.log(element);
            $(element).listview();
            var e = $(element).find('li >div');            
            e.collapsible({iconpos: "right"});
        } catch (ex) {
            console.log(ex);
        }
    }
};

In spite of the statement e.collapsible({iconpos: "right"}); the collapsible element shows up with image on left, not right.

Fiddle: http://jsfiddle.net/yxbv7h9g/2/


Solution

  • You are using a quite old version (1.2) of jQuery mobile where the setting is called iconPos with an uppercase P:

    var e = $(element).find('li >div');            
    e.collapsible({iconPos: "right"});
    

    Demo JSFiddle.

    However this setting name changed in version 1.3.0 with fixing #4899.

    So if you upgrade your jQuery mobile version then your original code will also work: Demo JSFiddle.