Build a Knockout.js component outside of Magento
Before diving into building something with Knockout.js in Magento, it’s essential to build a quick demo outside of Magento. This will help you get acquainted with how Knockout.js is included on a page, how to create view models, and how to activate that view model in Knockout.
Creating a Simple HTML Page
Consider a very simple HTML page that just outputs “Hello World” to the screen. The goal is to add Knockout to this page and update the h1 tag to use a Knockout.js data binding to see how things work.
Adding Knockout.js to the Page
First, open up a new tab and load knockoutjs.com. Then go up to the “Download and install” button. Scroll down under content delivery networks, and click the Knockout version 3.5.0. Magento doesn’t use 3.5.0; it uses 3.4.2. So go ahead and update this version in the URL and then grab this URL.
Within the HTML tag, create a <head> tag. And within that, create a <script> tag with the “type” set to “text/javascript”, and the “src” equal to the URL that was just copied to the clipboard. Close the script tag.
Creating a Knockout.js View Model
Now that Knockout.js is included on the page, under the h1 tag, create a new <script> tag. This is where the Knockout.js view model can be created.
Create a new function named myViewModel and open up the brackets. This will be an extremely simple view model. Create a new property on this function by using the “this” keyword, a dot, and then the property name (which will be myValue). Set this equal to “world”.
Data Binding with Knockout.js
Remove the “world” text and the exclamation mark from the h1 tag. Create a new span tag, leaving the contents blank. However, create a new attribute named data-bind. Knockout.js will look for DOM elements with this attribute and then perform its magic. Set this equal to a “text” value, followed by a colon and a space. Then, use the name of the property to bind, which will be the property defined earlier (myValue).
Activating the View Model
To get things working, Knockout.js needs to be made aware of the view model. This can be done by calling ko.applyBindings(), and then passing in an instance of the view model. Do this by using the “new” keyword followed by the name of the view model and a function invocation.
Now, when the file is saved and the page is refreshed, Knockout.js should be working correctly. It replaces the value of myValue with the property value defined within the view model.
Understanding the View, Model, and Activation
Let’s go over these sections of Knockout.js one more time:
- The
h1tag with thedata-bindattribute is considered the view. - The
myViewModelfunction with themyValueproperty is considered the view model. - The
ko.applyBindings()function activates the view model with Knockout.js.
When Knockout receives an instance of the view model, it processes it and updates any data-bind attributes with properties related to the view model.
Feel free to customize the script by adding your own business logic and see how the data-bind attribute will properly update data from your view model.