Knockout js tutorial

For today we are creating a knock out js 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



<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>

    </body>

</html>



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>



Comments

Popular posts from this blog

Vendor autoload is not found. Please run 'composer install' under application root directory.

Uncaught TypeError: require.config is not a function CSS and Javascript files are not loading after Magento 2 installation

HTTP_RAW_POST_DATA is deprecated from PHP 5.6 onwards and will be removed in PHP 7.0