Knockout js tutorial

For today we are creating a knockout js tutorial for magento 2, basic programing language to add and remove a set of popular programing language , so we are assuming some of the programing language which can be added to the array . Here to create a array we will use observable array, to begin with fist a basic skeleton of HTML is created and with cdn url jquery library and knockout js library can be added in the head section the below code appears in the following format

" "

afte addding next we will see how a body can be built using simple html language and knockout js , in some cases we might use jquery or javascript any programming language you are comfortable with

add the following line

<h4>Programming List 2018</h4>

below this we wil start to build our client side script which can be executed locally well i assume you are aware of the basic client side and server side script or programming language

we create a basic newProgramListFunction as a method and declare this to self variable as below

    <script>

            function newProgramListFunction(){

                var self = this;



            }







</script>

next we try to add the following set of our popular program langauge and here we will add the below

                self.programmingLanguange = ko.observableArray(['Magento', 'ReactJs', 'Knockout']);





                the following script will look like this







    <script>

            function newProgramListFunction(){

                var self = this;

                self.programmingLanguange = ko.observableArray(['Magento', 'ReactJs', 'Knockout']);

            }







</script>

for the new program list we apply bindings and the following syntax you can use for reference

            ko.applyBindings( newProgramListFunction())



            after adding the above code the following can be used in th html section as below



            <ul data-bind="foreach: programmingLanguange">

            <li>



                        <span data-bind="text: $data"></span>





            </li>

        </ul>







        here we are creating a for each loop and creating a unorder list a simple syntax in html and we can use it as ul and followed by li



        in the ul a data bind has been added where the array variable is being passed



        in the li child section a span tag is created and data bind is added .



        After addomg thos the data will begin to populate in the list format





        for Removing a item   the logic will be defined below



        here when a button is added or a link is added and when clicked to the link it begins to remove it

        <button data-bind="click: $parent.removeProgram">Remove</button>



        after adding the link logic needs to be build to remove the program from the list and in the script section the following code can be added





                self.removeProgram = function(){

                    self.programmingLanguange.remove(this);

                }





                the comple program looks like this



                <html>

    <head>

        <script              src="https://code.jquery.com/jquery-3.3.1.js"        ></script>

        <script              src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"              ></script>





    </head>

    <body>

        <h4>Programming List 2018</h4>



        <ul data-bind="foreach: programmingLanguange">

            <li>



                        <span data-bind="text: pg"></span>



                <button data-bind="click: $parent.removeProgram">Remove</button>

            </li>

        </ul>







        <script>

            function newProgramListFunction(){

                var self = this;

               function newProgramListFunction(){
               var self = this;

               self.programmingLanguange = ko.observableArray([
               {pg: 'Magento'},
               {pg: 'ReactJs'},
               {pg: 'Knockout'}
           ]);

                self.removeProgram = function(){

                    self.programmingLanguange.remove(this);

                }

            }

            ko.applyBindings(new newProgramListFunction())





</script>

    </body>

    </html>

the list might render on your web browser         but sometimes you might get and error      TypeError: $parent is undefined [Learn More] in your console

to resolve the following TypeError: $parent is undefined

that is you will need to replace the binding with the following code



        ko.applyBindings( new newProgramListFunction())



        the complete program is as below

       afte updating the following code try to check in your console the

TypeError: $parent is undefined will be resolved and the list will begin to appear



        <html>

    <head>

        <script              src="https://code.jquery.com/jquery-3.3.1.js"        ></script>

        <script              src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"              ></script>





    </head>

    <body>

        <h4>Programming List 2018</h4>



        <ul data-bind="foreach: programmingLanguange">

            <li>



                        <span data-bind="text: pg"></span>



                <button data-bind="click: $parent.removeProgram">Remove</button>

            </li>

        </ul>







        <script>

            function newProgramListFunction(){

                var self = this;

                function newProgramListFunction(){
               var self = this;

               self.programmingLanguange = ko.observableArray([
               {pg: 'Magento'},
               {pg: 'ReactJs'},
               {pg: 'Knockout'}
           ]);

                self.removeProgram = function(){

                    self.programmingLanguange.remove(this);

                }

            }

            ko.applyBindings(new newProgramListFunction())





</script>

    </body>

    </html>