Contents

Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Supported Platforms - Android 4.1+ including Android Oreo, iOS 6+ including iOS 11, Windows Phone 10 and all major mobile and desktop browsers

Having trouble? Ask for help.


Getting Started with Mobiscroll for Knockout

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

What is Knockout JS?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Learn more

What is the Mobiscroll Integration plugin and when to use it?

The Mobiscroll KnockoutJS Integrational plugin helps you to use mobiscroll with the KnockoutJS library. This plugin enables you to use mobiscroll with the same syntax knockout uses. While Mobiscroll can work with the KnockoutJS library without this plugin, this eases the Model - View interaction and helps to keep your markup as clean as possible by having additional custom bindings for each component. See the reference for more!

Getting started with The Mobiscroll KO integration

Here is an example of how to use the plugin in a common scenario

1. Download the plugin

When building your package select the KnockoutJS plugin on the download page. (don't forget to include the knockout.js on your page header!)

2. Load the necessary scripts

Load order is essential. Make sure you load jQuery before Knockout, and Mobiscroll after jQuery and Knockout.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="js/mobiscroll.custom-3.2.5.min.js"></script>

3. Create Model

Create an observable in your model for the desired data. In this case the anniversary wich will be a date.

var vModel = function() {
    this.anniversary = ko.observable();
}

4. Add markup and bind it to the model

Create a text input for the data, and add a binding for the property in the model.

<input type="text" data-bind="mobiscroll.date: anniversary" />

5. Apply the bindings

After all is set up, you need to call the knockouts applyBinding function in the document ready handler

(function(){
    ko.applyBindings(new vModel());
});

That's it! Now you can use the input as a datetime picker. Don't have to worry about initialization and data handling. The mobiscroll will update your model whenever you change the selected value using your scroller, and the scroller will also change its value when you set it in your model.

Custom Bindings Reference

General Bindings

Binding Description
mobiscroll.instance This binding can be used to set the mobiscroll instance to the model. The property name has to be passed as string parameter:

data-bind="mobiscroll.instance: 'myPropertyName'"
mobiscroll.options This binding can be used to pass parameters to the mobiscroll on initialization:

data-bind="mobiscroll.options: { display: 'inline', mode: 'clickpick', onChange: eventHandler }"

You can customize your scroller easily, just as you would with any framework:

// the model for the example
var vModel = function() {
    var that = this;
    this.appointment = ko.observable(); // this property will hold the date object
        
    this.count = ko.observable(0); // we will count the change event in this observable
        
    this.counterIncrease = function() { // this function will increase the counter - this will be the onChange event handler
        var count = that.count(); // get the counter value
        that.count(count + 1); // increase it by one
    };
}
<!-- Here is the input which will be the scroller -->
<input type="text" data-bind="
    mobiscroll.datetime: appointment, mobiscroll.options: { display: 'bottom', onChange: counterIncrease }" />
<!-- This div will contain the count -->
<div data-bind="text: count"></div>

Global Settings

mobiscroll.settings

Description

The global mobiscroll object is the place where you can set all the options that you'll be needing across your application or page. It should contain the settings that need to be the same across all components.

Example
// Sets the theme to iOS and localization to German
mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'
};

For more examples check out the demo page.