python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language

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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions