SlideShare a Scribd company logo
1 of 9
PART 3 (BEGINNERS)
Computed observables
“Computed observables, in their most
common incarnation, are read-only
calculated properties.”
How to declare computed observable?
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
});
}
 Pure computed observables, provide performance
and memory benefits over regular computed
observables for most applications. This is because
a pure computed observable doesn’t maintain
subscriptions to its dependencies when it has no
subscribers itself. This feature:
• Prevents memory leaks from computed observables that
are no longer referenced in an application but whose
dependencies still exist.
• Reduces computation overhead by not re-calculating
computed observables whose value isn’t being observed.
 If your computed observable simply calculates and
returns a value based on some observable
dependencies, then it’s better to declare it as
a ko.pureComputed instead of a ko.computed. For
example:
How to declare pure computed observable?
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
});
}
 Normally, computed observables have a value that is
computed from other observables and are
therefore read-only. What may seem surprising, then,
is that it is possible to make computed
observables writable. You just need to supply your own
callback function that does something sensible with
written values.
For example: http://jsfiddle.net/gx5856qy/
 A computed observable can be constructed using one of the
following forms:
 ko.computed( evaluator [, targetObject, options] ) — This form
supports the most common case of creating a computed observable.
• evaluator — A function that is used to evaluate the computed observable’s current
value.
• targetObject — If given, defines the value of this whenever KO invokes your
callback functions.
• options — An object with further properties for the computed observable. See the
full list below.
 ko.pureComputed( evaluator [, targetObject] ) — Constructs
a pure computed observable using the given evaluator function and
optional object to use for this. Unlike ko.computed, this method
doesn’t accept an options parameter.
 ko.pureComputed( options ) — Constructs a pure computed
observable using an optionsobject. This accepts the read, write,
and owner options described above.
 ko.computed( options ) — This single parameter form for creating a
computed observable accepts a JavaScript object with any of the following
properties.
• read — Required. A function that is used to evaluate the computed observable’s current value.
• write — Optional. If given, makes the computed observable writable. This is a function that
receives values that other code is trying to write to your computed observable. It’s up to you to
supply custom logic to handle the incoming values, typically by writing the values to some
underlying observable(s).
• owner — Optional. If given, defines the value of this whenever KO invokes your read or
write callbacks.
• pure — Optional. If this option is true, the computed observable will be set up as
a purecomputed observable. This option is an alternative to the ko.pureComputed constructor.
• deferEvaluation — Optional. If this option is true, then the value of the computed observable
will not be evaluated until something actually attempts to access its value or manually
subscribes to it. By default, a computed observable has its value determined immediately
during creation.
• disposeWhen — Optional. If given, this function is executed before each re-evaluation to
determine if the computed observable should be disposed. A true –is result will trigger disposal
of the computed observable.
• disposeWhenNodeIsRemoved — Optional. If given, disposal of the computed observable will
be triggered when the specified DOM node is removed by KO. This feature is used to dispose
computed observables used in bindings when nodes are removed by the template and
control-flow bindings.
A computed observable provides the following functions:
• dispose() — Manually disposes the computed observable, clearing all
subscriptions to dependencies. This function is useful if you want to stop a
computed observable from being updated or want to clean up memory for a
computed observable that has dependencies on observables that won’t be
cleaned.
• extend(extenders) — Applies the given extenders to the computed observable.
• getDependenciesCount() — Returns the current number of dependencies of the
computed observable.
• getSubscriptionsCount( [event] ) — Returns the current number of subscriptions
(either from other computed observables or manual subscriptions) of the
computed observable. Optionally, pass an event name (like "change") to return
just the count of subscriptions for that event.
• isActive() — Returns whether the computed observable may be updated in the
future. A computed observable is inactive if it has no dependencies.
• peek() — Returns the current value of the computed observable without creating a
dependency (see the section on peek).
• subscribe( callback [,callbackTarget, event] ) — Registers a manual
subscription to be notified of changes to the computed observable.
If opportunity doesn't knock, build a door.
- Milton Berle

More Related Content

What's hot

Angular Offline Progressive Web Apps With NodeJS
Angular Offline Progressive Web Apps With NodeJSAngular Offline Progressive Web Apps With NodeJS
Angular Offline Progressive Web Apps With NodeJSIlia Idakiev
 
C++ - Constructors,Destructors, Operator overloading and Type conversion
C++ - Constructors,Destructors, Operator overloading and Type conversionC++ - Constructors,Destructors, Operator overloading and Type conversion
C++ - Constructors,Destructors, Operator overloading and Type conversionHashni T
 
Java8 javatime-api
Java8 javatime-apiJava8 javatime-api
Java8 javatime-apiJini Lee
 
Iterator Design Pattern
Iterator Design PatternIterator Design Pattern
Iterator Design PatternVarun Arora
 
OPERATOR OVERLOADING IN C++
OPERATOR OVERLOADING IN C++OPERATOR OVERLOADING IN C++
OPERATOR OVERLOADING IN C++Aabha Tiwari
 
Handout # 4 functions + scopes
Handout # 4   functions + scopes Handout # 4   functions + scopes
Handout # 4 functions + scopes NUST Stuff
 
Code craftsmanship saturdays second session
Code craftsmanship saturdays second sessionCode craftsmanship saturdays second session
Code craftsmanship saturdays second sessionJean Marcel Belmont
 
"Reducers in Action" Антон Молдован
"Reducers in Action" Антон Молдован"Reducers in Action" Антон Молдован
"Reducers in Action" Антон МолдованFwdays
 
Operator overloadng
Operator overloadngOperator overloadng
Operator overloadngpreethalal
 
Function in C Programming
Function in C ProgrammingFunction in C Programming
Function in C ProgrammingAnil Pokhrel
 
Operator overloading
Operator overloadingOperator overloading
Operator overloadingBurhan Ahmed
 

What's hot (20)

Angular Offline Progressive Web Apps With NodeJS
Angular Offline Progressive Web Apps With NodeJSAngular Offline Progressive Web Apps With NodeJS
Angular Offline Progressive Web Apps With NodeJS
 
C++ - Constructors,Destructors, Operator overloading and Type conversion
C++ - Constructors,Destructors, Operator overloading and Type conversionC++ - Constructors,Destructors, Operator overloading and Type conversion
C++ - Constructors,Destructors, Operator overloading and Type conversion
 
Java8 javatime-api
Java8 javatime-apiJava8 javatime-api
Java8 javatime-api
 
M expression
M expressionM expression
M expression
 
Iterator Design Pattern
Iterator Design PatternIterator Design Pattern
Iterator Design Pattern
 
Mule expression
Mule expressionMule expression
Mule expression
 
OPERATOR OVERLOADING IN C++
OPERATOR OVERLOADING IN C++OPERATOR OVERLOADING IN C++
OPERATOR OVERLOADING IN C++
 
Handout # 4 functions + scopes
Handout # 4   functions + scopes Handout # 4   functions + scopes
Handout # 4 functions + scopes
 
Function
FunctionFunction
Function
 
Constructor in java
Constructor in javaConstructor in java
Constructor in java
 
Code craftsmanship saturdays second session
Code craftsmanship saturdays second sessionCode craftsmanship saturdays second session
Code craftsmanship saturdays second session
 
"Reducers in Action" Антон Молдован
"Reducers in Action" Антон Молдован"Reducers in Action" Антон Молдован
"Reducers in Action" Антон Молдован
 
Why hibernater1
Why hibernater1Why hibernater1
Why hibernater1
 
Clone cloud
Clone cloudClone cloud
Clone cloud
 
Operator overloading
Operator overloadingOperator overloading
Operator overloading
 
Java script function
Java script functionJava script function
Java script function
 
Sql Functions And Procedures
Sql Functions And ProceduresSql Functions And Procedures
Sql Functions And Procedures
 
Operator overloadng
Operator overloadngOperator overloadng
Operator overloadng
 
Function in C Programming
Function in C ProgrammingFunction in C Programming
Function in C Programming
 
Operator overloading
Operator overloadingOperator overloading
Operator overloading
 

Similar to Knockoutjs Part 3 Computed Observables

Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of SignalsCoding Academy
 
Functions in c++
Functions in c++Functions in c++
Functions in c++Maaz Hasan
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Sumanth Chinthagunta
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applicationsIvano Malavolta
 
C++ Interview Question And Answer
C++ Interview Question And AnswerC++ Interview Question And Answer
C++ Interview Question And AnswerJagan Mohan Bishoyi
 
C++ questions And Answer
C++ questions And AnswerC++ questions And Answer
C++ questions And Answerlavparmar007
 
Pyclustering tutorial - K-means
Pyclustering tutorial - K-meansPyclustering tutorial - K-means
Pyclustering tutorial - K-meansAndrei Novikov
 
Constructors in C++.pptx
Constructors in C++.pptxConstructors in C++.pptx
Constructors in C++.pptxRassjb
 
Angular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupAngular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupDavid Barreto
 
Oracle Query Optimizer - An Introduction
Oracle Query Optimizer - An IntroductionOracle Query Optimizer - An Introduction
Oracle Query Optimizer - An Introductionadryanbub
 
Visualizing the model selection process
Visualizing the model selection processVisualizing the model selection process
Visualizing the model selection processRebecca Bilbro
 
Autoscaling Kubernetes
Autoscaling KubernetesAutoscaling Kubernetes
Autoscaling Kubernetescraigbox
 
Raybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript LibraryRaybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript Libraryray biztech
 
Robust and declarative machine learning pipelines for predictive buying at Ba...
Robust and declarative machine learning pipelines for predictive buying at Ba...Robust and declarative machine learning pipelines for predictive buying at Ba...
Robust and declarative machine learning pipelines for predictive buying at Ba...Gianmario Spacagna
 
PVS-Studio vs Chromium. 3-rd Check
PVS-Studio vs Chromium. 3-rd CheckPVS-Studio vs Chromium. 3-rd Check
PVS-Studio vs Chromium. 3-rd CheckAndrey Karpov
 
Chapter One Function.pptx
Chapter One Function.pptxChapter One Function.pptx
Chapter One Function.pptxmiki304759
 
Workflow as code with Azure Durable Functions
Workflow as code with Azure Durable FunctionsWorkflow as code with Azure Durable Functions
Workflow as code with Azure Durable FunctionsMassimo Bonanni
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slidesDavid Barreto
 

Similar to Knockoutjs Part 3 Computed Observables (20)

Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of Signals
 
Functions in c++
Functions in c++Functions in c++
Functions in c++
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
 
C++ Interview Question And Answer
C++ Interview Question And AnswerC++ Interview Question And Answer
C++ Interview Question And Answer
 
C++ questions And Answer
C++ questions And AnswerC++ questions And Answer
C++ questions And Answer
 
Pyclustering tutorial - K-means
Pyclustering tutorial - K-meansPyclustering tutorial - K-means
Pyclustering tutorial - K-means
 
Constructors in C++.pptx
Constructors in C++.pptxConstructors in C++.pptx
Constructors in C++.pptx
 
Angular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupAngular Optimization Web Performance Meetup
Angular Optimization Web Performance Meetup
 
Oracle Query Optimizer - An Introduction
Oracle Query Optimizer - An IntroductionOracle Query Optimizer - An Introduction
Oracle Query Optimizer - An Introduction
 
Visualizing the model selection process
Visualizing the model selection processVisualizing the model selection process
Visualizing the model selection process
 
Autoscaling Kubernetes
Autoscaling KubernetesAutoscaling Kubernetes
Autoscaling Kubernetes
 
Vb net1
Vb net1Vb net1
Vb net1
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
Raybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript LibraryRaybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript Library
 
Robust and declarative machine learning pipelines for predictive buying at Ba...
Robust and declarative machine learning pipelines for predictive buying at Ba...Robust and declarative machine learning pipelines for predictive buying at Ba...
Robust and declarative machine learning pipelines for predictive buying at Ba...
 
PVS-Studio vs Chromium. 3-rd Check
PVS-Studio vs Chromium. 3-rd CheckPVS-Studio vs Chromium. 3-rd Check
PVS-Studio vs Chromium. 3-rd Check
 
Chapter One Function.pptx
Chapter One Function.pptxChapter One Function.pptx
Chapter One Function.pptx
 
Workflow as code with Azure Durable Functions
Workflow as code with Azure Durable FunctionsWorkflow as code with Azure Durable Functions
Workflow as code with Azure Durable Functions
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
 

More from Bhaumik Patel

1 - Introduction of Azure DevOps
1 - Introduction of Azure DevOps1 - Introduction of Azure DevOps
1 - Introduction of Azure DevOpsBhaumik Patel
 
Difference between MVC 3, 4, 5 and 6
Difference between MVC 3, 4, 5 and 6Difference between MVC 3, 4, 5 and 6
Difference between MVC 3, 4, 5 and 6Bhaumik Patel
 
Knockoutjs Part 5 Bindings - Control flow
Knockoutjs Part 5 Bindings - Control flowKnockoutjs Part 5 Bindings - Control flow
Knockoutjs Part 5 Bindings - Control flowBhaumik Patel
 
Knockoutjs Part 4 Bindings Controlling text and appearance
Knockoutjs Part 4  Bindings  Controlling text and appearanceKnockoutjs Part 4  Bindings  Controlling text and appearance
Knockoutjs Part 4 Bindings Controlling text and appearanceBhaumik Patel
 
Knockoutjs Part 2 Beginners
Knockoutjs Part 2 BeginnersKnockoutjs Part 2 Beginners
Knockoutjs Part 2 BeginnersBhaumik Patel
 

More from Bhaumik Patel (7)

1 - Introduction of Azure DevOps
1 - Introduction of Azure DevOps1 - Introduction of Azure DevOps
1 - Introduction of Azure DevOps
 
SQL Joins.pptx
SQL Joins.pptxSQL Joins.pptx
SQL Joins.pptx
 
Difference between MVC 3, 4, 5 and 6
Difference between MVC 3, 4, 5 and 6Difference between MVC 3, 4, 5 and 6
Difference between MVC 3, 4, 5 and 6
 
Knockoutjs Part 5 Bindings - Control flow
Knockoutjs Part 5 Bindings - Control flowKnockoutjs Part 5 Bindings - Control flow
Knockoutjs Part 5 Bindings - Control flow
 
Knockoutjs Part 4 Bindings Controlling text and appearance
Knockoutjs Part 4  Bindings  Controlling text and appearanceKnockoutjs Part 4  Bindings  Controlling text and appearance
Knockoutjs Part 4 Bindings Controlling text and appearance
 
Knockoutjs Part 2 Beginners
Knockoutjs Part 2 BeginnersKnockoutjs Part 2 Beginners
Knockoutjs Part 2 Beginners
 
HTML5 - Quick Guide
HTML5 - Quick GuideHTML5 - Quick Guide
HTML5 - Quick Guide
 

Recently uploaded

Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 

Recently uploaded (20)

Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 

Knockoutjs Part 3 Computed Observables

  • 2. “Computed observables, in their most common incarnation, are read-only calculated properties.” How to declare computed observable? function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }); }
  • 3.  Pure computed observables, provide performance and memory benefits over regular computed observables for most applications. This is because a pure computed observable doesn’t maintain subscriptions to its dependencies when it has no subscribers itself. This feature: • Prevents memory leaks from computed observables that are no longer referenced in an application but whose dependencies still exist. • Reduces computation overhead by not re-calculating computed observables whose value isn’t being observed.
  • 4.  If your computed observable simply calculates and returns a value based on some observable dependencies, then it’s better to declare it as a ko.pureComputed instead of a ko.computed. For example: How to declare pure computed observable? function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); this.fullName = ko.pureComputed(function() { return this.firstName() + " " + this.lastName(); }); }
  • 5.  Normally, computed observables have a value that is computed from other observables and are therefore read-only. What may seem surprising, then, is that it is possible to make computed observables writable. You just need to supply your own callback function that does something sensible with written values. For example: http://jsfiddle.net/gx5856qy/
  • 6.  A computed observable can be constructed using one of the following forms:  ko.computed( evaluator [, targetObject, options] ) — This form supports the most common case of creating a computed observable. • evaluator — A function that is used to evaluate the computed observable’s current value. • targetObject — If given, defines the value of this whenever KO invokes your callback functions. • options — An object with further properties for the computed observable. See the full list below.  ko.pureComputed( evaluator [, targetObject] ) — Constructs a pure computed observable using the given evaluator function and optional object to use for this. Unlike ko.computed, this method doesn’t accept an options parameter.  ko.pureComputed( options ) — Constructs a pure computed observable using an optionsobject. This accepts the read, write, and owner options described above.
  • 7.  ko.computed( options ) — This single parameter form for creating a computed observable accepts a JavaScript object with any of the following properties. • read — Required. A function that is used to evaluate the computed observable’s current value. • write — Optional. If given, makes the computed observable writable. This is a function that receives values that other code is trying to write to your computed observable. It’s up to you to supply custom logic to handle the incoming values, typically by writing the values to some underlying observable(s). • owner — Optional. If given, defines the value of this whenever KO invokes your read or write callbacks. • pure — Optional. If this option is true, the computed observable will be set up as a purecomputed observable. This option is an alternative to the ko.pureComputed constructor. • deferEvaluation — Optional. If this option is true, then the value of the computed observable will not be evaluated until something actually attempts to access its value or manually subscribes to it. By default, a computed observable has its value determined immediately during creation. • disposeWhen — Optional. If given, this function is executed before each re-evaluation to determine if the computed observable should be disposed. A true –is result will trigger disposal of the computed observable. • disposeWhenNodeIsRemoved — Optional. If given, disposal of the computed observable will be triggered when the specified DOM node is removed by KO. This feature is used to dispose computed observables used in bindings when nodes are removed by the template and control-flow bindings.
  • 8. A computed observable provides the following functions: • dispose() — Manually disposes the computed observable, clearing all subscriptions to dependencies. This function is useful if you want to stop a computed observable from being updated or want to clean up memory for a computed observable that has dependencies on observables that won’t be cleaned. • extend(extenders) — Applies the given extenders to the computed observable. • getDependenciesCount() — Returns the current number of dependencies of the computed observable. • getSubscriptionsCount( [event] ) — Returns the current number of subscriptions (either from other computed observables or manual subscriptions) of the computed observable. Optionally, pass an event name (like "change") to return just the count of subscriptions for that event. • isActive() — Returns whether the computed observable may be updated in the future. A computed observable is inactive if it has no dependencies. • peek() — Returns the current value of the computed observable without creating a dependency (see the section on peek). • subscribe( callback [,callbackTarget, event] ) — Registers a manual subscription to be notified of changes to the computed observable.
  • 9. If opportunity doesn't knock, build a door. - Milton Berle