KnockoutJS Observable Array
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <head> <title>KnockoutJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script> </head> <body> <div> <form data-bind="submit: addItem"> New item: <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button> <p>Your items:</p> <select multiple="multiple" width="50" data-bind="options: myObservableArray"> </select> </form> </div> <script> // data model content goes here var ViewModel = function() { this.myObservableArray = ko.observableArray(['Mango', 'Banana', 'Apple']); // Initialize an array this.itemToAdd = ko.observable('Test');// Add some default value to input this.addItem = function(){ if(this.itemToAdd().length > 0){ this.myObservableArray.push(this.itemToAdd()); } }; }; // Activate Knockout.JS ko.applyBindings(new ViewModel()); </script> </body> </html>
<!DOCTYPE html> <head> <title>KnockoutJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script> </head> <body> <div> <form data-bind="submit: addItem"> New item: <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button> <p>Your items:</p> <select multiple="multiple" width="50" data-bind="options: myObservableArray"> </select> </form> </div> <script> // data model content goes here var ViewModel = function() { this.myObservableArray = ko.observableArray(['Mango', 'Banana', 'Apple']); // Initialize an array this.itemToAdd = ko.observable('Test');// Add some default value to input this.addItem = function(){ if(this.itemToAdd().length > 0){ this.myObservableArray.push(this.itemToAdd()); } }; }; // Activate Knockout.JS ko.applyBindings(new ViewModel()); </script> </body> </html>
Copyrights@tutorialsplane.com