Download to read offline
![Observable Array
..
products: ko.observableArray([
{ name: “Jacket D234", price: 1749, id:321 },
{ name: “Jeans D401", price: 1899, id:479 }
])
…
Can use JS variable if multiple values being push/pop to prevent
notification each time](https://image.slidesharecdn.com/knockoutjs-150204055602-conversion-gate01/85/Knockout-js-11-320.jpg)
More Related Content
Knockout js
- 2. What is Releasedin July 5, 2010 by Steve Sanderson Free, open source & no dependency Separate JS implementation of MVVM Pattern Wide browser support (IE6+, FF2+, Chrome, Safari, Opera) View Data Binding View Model Model
- 4.
- 5. in 3 Steps <inputtype=“text” data-bind="text: personName"></span> var myViewModel = { personName: ko.observable('Bob') }; ko.applyBindings(myViewModel);
- 6.
- 7. Unwrap/Read Observables name(‘Bob’); Makesinto function - unlike .net property var name = ko.observable(‘Bob'); console.log(name); console.log(name()); name = ‘Bob’; name(‘Bob’); Dive into objects with declarative binding people().name
- 8.
- 9. Defining a Computed Based on observable Two functions – Read & Write Can base upon other computed observables too var hasChanges = ko.computed(function() { return datacontext.hasChanges(); });
- 10. Observable Array Tracks which objectsare in the array
- 11. Observable Array .. products: ko.observableArray([ {name: “Jacket D234", price: 1749, id:321 }, { name: “Jeans D401", price: 1899, id:479 } ]) … Can use JS variable if multiple values being push/pop to prevent notification each time
- 12. Declarative Bindings inHTML Binding – talking between JS and HTML elements <input type="text" data-bind="enable: allowEdit, value: price" /> attr checked click css disable enable event hasfocus html options optionsTe xt optionsV alue selected Options style submit text uniqueN ame value visible
- 13.
- 14. Custom Binding Handler ko.bindingHandlers.fadeVisible= { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { … … }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { … … } }; Runs first time the binding is evaluated Runs after init and every time one of its observables changes
- 15. When the worldfalls down… Print VM on screen
- 16.
Editor's Notes
- #3 MVVM: Model (BO) – ViewModel (JS) – View (UI) ViewModel: JavaScript that goes in View - fancy way KO: Separate behavior and structure Declarative bindings (simple to bind JS variables to fields) Observables (two way notification) Durandal depends on KO for SPA
- #5 1. Observable - INotifyPropertyChanged - Interface apply to classes to communicate b/w properties of clases and UI – e.g., SignalR 2. Computed - dependent 3. ObservableArray - Observable collection - kin to observable 80% KO covered
- #6 1. KO is data binding get the library - either nuget or knockoutjscom HTML5 specs - own atribute - start with data-* binding and value (find property ‘personName‘) 2. KO properties can either b POJO (display only) or observables (2 way) Obs. gives ability to notify the targets (UI) when something changes and also reflected in source (JS) 3. applybindings - what part of the dom (optional) otherwise whole dom
- #7 with and w/o KO e.g., 50different properties get from ajax then stick it to the element 1 - so 50 to pull same if update then again 50 to update can bake all this in KO instead of 100 loc 2 way data binding can also bind events unlike delegates, behavior in say xaml dive into objects using dot syntax ( )
- #8 Require ( ) to unwrap. Not like .net property. Use ( ) to Get and Set Why we need () why cant simply properties: JS in most browsers support ECMASCRIPT 3 or 5. skipped 4. ECS3 doesnt support getters/setters whereas ECS5 does support. if whole world shifts to ECS5 then u can use KO with a plugin by SS guy which will allow to use KO without (). therefore you have to use () only way to use getters/setters - observable pattern name changed from observable to string Declarative binding: in HTML nice rule about ( ). right most property no need for ( ) data-bind="value:code" no need for ( ) but anything inside then use ( )
- #10 based on observables converter like in Silverlight e.g., hex color and let users chose color instead of hex only re-eval when observable that executed gets changed not all the time default only one func - read otherwise pass in second to write
- #11 notify when items are added/removed not when objects in array change push/pop - array functions like regular every time push/pop - notification
- #12 people = ko.observableArray(); var js = people(); js.push (new Person().firstName('John').lastName('Doe')); people.valueHasMutated();
- #13 like click, event, value, visible etc Event Binding: Click, Event Display & State: Disable, Enable, Visible Text & Value: Text, Value Specific Attributes: attr
- #14 init – first time when binding is evaluated update – after init & every time observable change (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
- #16 <pre data-bind="text: ko.toJSON($data, null, 2)"></pre><br/> current context - $data root context of the page - $root upper level context - $parent