Use jQuery plugin with basis.js (plugin as component)

by rdvornov

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://yourjavascript.com/49224354211/basis-ui.js"></script>
<script id="dateInput" type="text/basis-template">
    <div class="input-append date">
        <input type="text"/>
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"/>
        </span>
    </div>
</script>

<script id="mainView" type="text/basis-template">
    <div>
        <!--{dateInput}-->
        
        <span class="btn" event-click="setNow">set now</span>
        <span class="btn" event-click="setNY">set ny</span>
        {value}
    </div>
</script>

JavaScript

basis.require('basis.data');
basis.require('basis.ui');

var DateInput = basis.ui.Node.subclass({
    template: 'id:dateInput',
    templateSync: function(){
        basis.ui.Node.prototype.templateSync.call(this);
        
        var el = $(this.element).datetimepicker({
            format: 'dd/MM/yyyy hh:mm:ss'
        });
        
        el.on('changeDate', function(e) {
            this.date.set(e.localDate);
        }.bind(this));
        
        this.date.link(el.data('datetimepicker'), function(value){
            this.setLocalDate(value);
        });
    },
    init: function(){
        basis.ui.Node.prototype.init.call(this);
        this.date = new basis.data.Value();
    }
});

var view = new basis.ui.Node({
    container: document.body,
    template: 'id:mainView',
    binding: {
        dateInput: new DateInput(),
        value: {
            events: 'satelliteChanged',
            getter: function(view){
                var dateInput = view.satellite.dateInput;
                return (dateInput && dateInput.date) || '';
            }
        }
    },
    action: {
        setNow: function(){
            view.satellite.dateInput.date.set(new Date());
        },
        setNY: function(){
            view.satellite.dateInput.date.set(new Date(2013, 0, 1));
        }
    }
});