SlideShare una empresa de Scribd logo
1 de 6
Introduction to KnockoutJS 
1
What We’re Going to Do 
• Get our hands dirty with KnockoutJS 
• Some basic knowledge of Javascript, Apex and Visualforce 
would be beneficial 
• We’re going to build a simple, fast, contact viewer
KnockoutJS? 
• KnockoutJS is a Javascript framework for building quick, 
single-page applications 
• Requires less boilerplate that a lot of frameworks, and is 
conceptually simpler than many 
• Turns out it’s very easy to use with Javascript remoting!
KnockoutJS Architecture 
• Knockout uses a Model – View – View Model (MVVM) 
pattern 
• The Model is our Salesforce schema and data 
• The View displays data from, and triggers actions on the 
view model 
• The View Model is pure code that interacts with the 
model, and provides data and actions for the View
View Model and Bindings 
• The View Model has properties called observables: 
self.name = ko.observable(‘Bob’); 
• The View can bind to these: 
<span data-bind=“text: name”/> 
• When the observable value changes, the view changes!
Learn More! 
• You’re probably hooked by now, so check out these 
resources to learn more about KnockoutJS: 
–Interactive tutorials at http://learn.knockoutjs.com/ 
–RTFM! It’s simply written, comprehensive, and logical 
(something all to rare these days) 
http://knockoutjs.com/documentation/introduction.ht 
ml

Más contenido relacionado

La actualidad más candente

Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)
Benjamin Howarth
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
Pragnesh Vaghela
 
Lightweight webdev
Lightweight webdevLightweight webdev
Lightweight webdev
damianofusco
 

La actualidad más candente (20)

Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stack
 
Mean PPT
Mean PPTMean PPT
Mean PPT
 
Event Sourcing your AngularJS applications
Event Sourcing your AngularJS applicationsEvent Sourcing your AngularJS applications
Event Sourcing your AngularJS applications
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
MVVM Applied: From Silverlight to Windows Phone to Windows 8
MVVM Applied: From Silverlight to Windows Phone to Windows 8MVVM Applied: From Silverlight to Windows Phone to Windows 8
MVVM Applied: From Silverlight to Windows Phone to Windows 8
 
A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition
 
Lightweight webdev
Lightweight webdevLightweight webdev
Lightweight webdev
 
Les nouveautés ASP.NET 5 avec Visual Studio 2015
Les nouveautés ASP.NET 5 avec Visual Studio 2015Les nouveautés ASP.NET 5 avec Visual Studio 2015
Les nouveautés ASP.NET 5 avec Visual Studio 2015
 
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Beyond the MEAN Stack: Thinking Small with Node.js for the EnterpriseBeyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
 
Usersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJSUsersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJS
 
VJUG 24 - Building microservices with Vert.x
VJUG 24 - Building microservices with Vert.xVJUG 24 - Building microservices with Vert.x
VJUG 24 - Building microservices with Vert.x
 
AngularJS - GrapeCity Echo Tokyo
AngularJS - GrapeCity Echo TokyoAngularJS - GrapeCity Echo Tokyo
AngularJS - GrapeCity Echo Tokyo
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
From zero to hero with Docker
From zero to hero with DockerFrom zero to hero with Docker
From zero to hero with Docker
 
What is new in ASP.NET Core
What is new in ASP.NET CoreWhat is new in ASP.NET Core
What is new in ASP.NET Core
 
Jquery
JqueryJquery
Jquery
 
Tailwind CSS - KanpurJS
Tailwind CSS - KanpurJSTailwind CSS - KanpurJS
Tailwind CSS - KanpurJS
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
 

Destacado

Factors affecting the value of goodwill
Factors affecting the value of goodwillFactors affecting the value of goodwill
Factors affecting the value of goodwill
akhilasasidharan
 
The heinemann-elt-toefl-preparation-course
The heinemann-elt-toefl-preparation-courseThe heinemann-elt-toefl-preparation-course
The heinemann-elt-toefl-preparation-course
Alina Mititelu
 
Difference between capital method and fluctuating capital method
Difference  between capital method and fluctuating capital  methodDifference  between capital method and fluctuating capital  method
Difference between capital method and fluctuating capital method
akhilasasidharan
 

Destacado (16)

Em drive basic theory
Em drive basic theoryEm drive basic theory
Em drive basic theory
 
Why the Rule of Law is Key to China's Modernization | Keping Yu
Why the Rule of Law is Key to China's Modernization | Keping YuWhy the Rule of Law is Key to China's Modernization | Keping Yu
Why the Rule of Law is Key to China's Modernization | Keping Yu
 
Mission_Sahayata_J & K Flood
Mission_Sahayata_J & K FloodMission_Sahayata_J & K Flood
Mission_Sahayata_J & K Flood
 
Raidlayer dedicated server uk
Raidlayer dedicated server ukRaidlayer dedicated server uk
Raidlayer dedicated server uk
 
RTI ppt
RTI pptRTI ppt
RTI ppt
 
43035627 apostila-de-execucao-trabalhista
43035627 apostila-de-execucao-trabalhista43035627 apostila-de-execucao-trabalhista
43035627 apostila-de-execucao-trabalhista
 
This is BIMMING !!!!!
This is BIMMING !!!!!This is BIMMING !!!!!
This is BIMMING !!!!!
 
Copy of rti in fusd final
Copy of rti in fusd finalCopy of rti in fusd final
Copy of rti in fusd final
 
Factors affecting the value of goodwill
Factors affecting the value of goodwillFactors affecting the value of goodwill
Factors affecting the value of goodwill
 
Ernst & Young: Venture capital and startups in germany 2014
Ernst & Young: Venture capital and startups in germany 2014Ernst & Young: Venture capital and startups in germany 2014
Ernst & Young: Venture capital and startups in germany 2014
 
DFG Champions Roadshows - October 2016
DFG Champions Roadshows - October 2016 DFG Champions Roadshows - October 2016
DFG Champions Roadshows - October 2016
 
Drama lesson plan
Drama lesson planDrama lesson plan
Drama lesson plan
 
The heinemann-elt-toefl-preparation-course
The heinemann-elt-toefl-preparation-courseThe heinemann-elt-toefl-preparation-course
The heinemann-elt-toefl-preparation-course
 
Batchable vs @future vs Queueable
Batchable vs @future vs QueueableBatchable vs @future vs Queueable
Batchable vs @future vs Queueable
 
Difference between capital method and fluctuating capital method
Difference  between capital method and fluctuating capital  methodDifference  between capital method and fluctuating capital  method
Difference between capital method and fluctuating capital method
 
Drama lesson plan
Drama lesson planDrama lesson plan
Drama lesson plan
 

Similar a Intro to Knockout.JS for Salesforce1

Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
Andoni Arroyo
 
Introduction to MVC Web Framework with CodeIgniter
Introduction to MVC Web Framework with CodeIgniterIntroduction to MVC Web Framework with CodeIgniter
Introduction to MVC Web Framework with CodeIgniter
Pongsakorn U-chupala
 

Similar a Intro to Knockout.JS for Salesforce1 (20)

Sitecore mvc
Sitecore mvcSitecore mvc
Sitecore mvc
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
 
MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
 
An introduction to knockout.js
An introduction to knockout.jsAn introduction to knockout.js
An introduction to knockout.js
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
 
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
 
Aspnet mvc
Aspnet mvcAspnet mvc
Aspnet mvc
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
Introduction to MVC Web Framework with CodeIgniter
Introduction to MVC Web Framework with CodeIgniterIntroduction to MVC Web Framework with CodeIgniter
Introduction to MVC Web Framework with CodeIgniter
 
MVC + ORM (with project implementation)
MVC + ORM (with project implementation)MVC + ORM (with project implementation)
MVC + ORM (with project implementation)
 
Building databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with KnockoutjsBuilding databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with Knockoutjs
 
ASP.NET MVC Best Practices malisa ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncube
 
Module2
Module2Module2
Module2
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
E-Commerce Applications Development
E-Commerce Applications Development E-Commerce Applications Development
E-Commerce Applications Development
 
ASP.NET MVC 5 Building Your First Web Application (A Beginner S Guide
ASP.NET MVC 5  Building Your First Web Application (A Beginner S GuideASP.NET MVC 5  Building Your First Web Application (A Beginner S Guide
ASP.NET MVC 5 Building Your First Web Application (A Beginner S Guide
 
01 introduction to struts2
01 introduction to struts201 introduction to struts2
01 introduction to struts2
 

Último

+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
shinachiaurasa2
 

Último (20)

Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
 
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdfThe Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
 

Intro to Knockout.JS for Salesforce1

  • 2. What We’re Going to Do • Get our hands dirty with KnockoutJS • Some basic knowledge of Javascript, Apex and Visualforce would be beneficial • We’re going to build a simple, fast, contact viewer
  • 3. KnockoutJS? • KnockoutJS is a Javascript framework for building quick, single-page applications • Requires less boilerplate that a lot of frameworks, and is conceptually simpler than many • Turns out it’s very easy to use with Javascript remoting!
  • 4. KnockoutJS Architecture • Knockout uses a Model – View – View Model (MVVM) pattern • The Model is our Salesforce schema and data • The View displays data from, and triggers actions on the view model • The View Model is pure code that interacts with the model, and provides data and actions for the View
  • 5. View Model and Bindings • The View Model has properties called observables: self.name = ko.observable(‘Bob’); • The View can bind to these: <span data-bind=“text: name”/> • When the observable value changes, the view changes!
  • 6. Learn More! • You’re probably hooked by now, so check out these resources to learn more about KnockoutJS: –Interactive tutorials at http://learn.knockoutjs.com/ –RTFM! It’s simply written, comprehensive, and logical (something all to rare these days) http://knockoutjs.com/documentation/introduction.ht ml