Options dropdownlist binding in knockoutjs

KnockoutJS Options Bindings using mvc 4 jquery


This is a simple example, to bind the options or dropdownlis in knockout js.

In the 1st step, write the view code which are give below:

<select data-bind="options: subscriptionsList, value:ID, optionsText:'FriendlyName' "></select>



In the 2nd step, write the viewModel code and bind to viewModel code within
document dot ready function.

<script type="text/javascript">

    function subscription(id, name) {
        var self = this;
        self.ID = ko.observable(id);
        self.FriendlyName = ko.observable(name);
    }

    function ViewModel() {
        var self = this;
        self.ID = ko.observable();
        self.subscriptionsList = ko.observableArray();

        var subscriptions = [

            {
            ID: '1',
            FriendlyName: 'Friendly 1'
            },
            {
            ID: '2',
            FriendlyName: 'Friendly 2'
            }
        ];

        $.each(subscriptions, function (index, item) {
            self.subscriptionsList.push(new subscription(item));
        });     
    }


    $(document).ready(function () {
        ko.applyBindings(new ViewModel());
    });

</script>



Thanks,
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book