Backbone.ModelBinder not refreshing Jquery Mobile UI

Notice that if you run the following command (using Chrome dev console or similar), model binder does does not refresh the jquery mobile ui: model.set({test: "2"}); Now if you manually refresh the select box, you can refresh the ui: $('#bindTest').selectmenu('refresh',true); Now if you remove Jquery Mobile UI references, refreshes to view occur as expected.

by erick

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/0.1.5/Backbone.ModelBinder.min.js"></script>
<body>
    <div data-role="page" id="pageHome" class="page-map">
        <div data-role="header" data-position="inline" data-theme="a">
            <h1>ModelBinder Example2 using JQM (broken)</h1>
        </div>
        <div data-role="content">
            <h1>JQM (broken) version of https://github.com/theironcook/Backbone.ModelBinder/blob/master/examples/Example2.html:</h1>
            <br>
Model data:
<div id="modelData"></div>

<hr>
<br>

<div id="viewContent"></div>
</div>
</div>
</body>

JavaScript

$().ready(function () {

            dogs = new Backbone.Collection({model:Backbone.Model});
            dogs.add({id:1, name:'Andy', collar: 'yellow'});
            dogs.add({id:2, name:'Biff', collar: 'red'});
            dogs.add({id:3, name:'Candy', collar: 'green'});


            var phoneConverter = function (direction, value) {
                if (direction === Backbone.ModelBinder.Constants.ModelToView) {
                    var formattedPhone = '';
                    if (value) {
                        formattedPhone = value.replace(/[^0-9]/g, '');

                        if (formattedPhone.length == 7) {
                            formattedPhone = formattedPhone.substring(0, 3) + '-' + formattedPhone.substring(3, 7);
                        }
                        else if (formattedPhone.length == 10) {
                            formattedPhone = '(' + formattedPhone.substring(0, 3) + ') ' + formattedPhone.substring(3, 6) + '-' + formattedPhone.substring(6, 10);
                        }
                        else if (formattedPhone.length == 11 && formattedPhone[0] === '1') {
                            formattedPhone = '1 (' + formattedPhone.substring(1, 4) + ') ' + formattedPhone.substring(4, 7) + '-' + formattedPhone.substring(7, 11);
                        }
                    }

                    return formattedPhone;
                }
                else {
                    return value.replace(/[^0-9]/g, '');
                }
            };


            model = new Backbone.Model({firstName:'Bob', graduated:'maybe', phone: '1234567'});

            model.bind('change', function () {
                $('#modelData').html(JSON.stringify(model.toJSON()));
            });

            model.trigger('change'); // just to show the #modelData values initially, not needed for the ModelBinder


            ViewClass = Backbone.View.extend({

                _modelBinder:undefined,

                initialize:function () {
             ...