Posts

Showing posts with the label Knockout

Donate

Simple Array Manipulation Using Knockout.js (Add, Remove All, Remove Item, Show)

Image
Most of KnockoutJS features involves binding of a viewmodel object to the a view. But there are special cases where in you want to manipulate ordinary arrays without using ko.observableArray(). So to expound more on this post, here's a sample code below: KnockoutJS code: $(document).ready( function () { function ProductViewModel() { //product array this .Products = [{ id: '1' , name: 'Wax' }, { id: '2' , name: 'Cotton Buds' }, { id: '3' , name: 'Nova' }, { id: '4' , name: 'Milo' } ]; //insert product this .Add = function () { console.log( 'Insert Activity' ); this .Products.push({ id: '5' , name: 'Test' }); console.log( 'Total products: ' + this .Products.length); };...

Unable to get value of the property 'nodeType': object is null or undefined (Knockout JS)

After completing a simple binding using Knockout Javascript framework, I decided to transfer the script tags to the header section of the page. Upon running my code, I stumbled upon an error as stated on the title. I believe, the DOM elements have not been initialized when the binding occurs. One solution I came up was to transfer the view model script inside the document ready function. <head runat= "server" > <title>Integrate jQuery with Knockout!</title> <script type= "text/javascript" src= "Scripts/knockout-3.1.0.js" ></script> <script type= "text/javascript" src= "Scripts/jquery-1.7.1.min.js" ></script> <script type= "text/javascript" > $(document).ready( function () { var myViewModel = { personName: 'PsychoGenes' , personAge: 33 }; ko.applyBindings(myViewModel); }); </scri...

Simple Knockout.js Example In ASP.NET Web Forms

Image
Intrigued with emerging Javascript framework called knockout, I decided to try a simple example myself. As defined by Wikipedia: Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates. The underlying principles are therefore: 1. A clear separation between domain data, view components and data to be displayed 2. The presence of a clearly defined layer of specialized code to manage the relationships between the view components The features of Knockout are based on Declarative bindings: A. Automatic UI refresh (when the data model's state changes, the UI updates automatically) B. Dependency tracking C. Templating (using a native template engine although other templating engines can be used, such as jquery.tmpl) I come to a conclusion that this has similar approach to WPF MVVM. So, to get started with, download the latest Knockout.js framework here: Knockout Home Page and add reference to your html or aspx markup: Code: <!...

Donate