--- title: "Getting Started with Templates in Knockout.js: How to Organize and Reuse UI Components" description: "Templates in Knockout.js provide a powerful way to organize and reuse UI components, making your code more modular and maintainable." author: "Ravi Vishwakarma" published: 2024-06-26 updated: 2024-06-26 canonical: https://www.mindstick.com/articles/336240/getting-started-with-templates-in-knockout-js-how-to-organize-and-reuse-ui-components category: "knockcout js" tags: ["web development", "knockout.js", "front-end development"] reading_time: 5 minutes --- # Getting Started with Templates in Knockout.js: How to Organize and Reuse UI Components [Templates](https://www.mindstick.com/interview/34049/what-are-templates-in-knockout-js) in Knockout.js provide a powerful way to organize and reuse [UI components](https://www.mindstick.com/forum/157863/how-do-you-use-templates-in-knockoutjs-to-create-reusable-ui-components), making [your code](https://answers.mindstick.com/qa/35617/how-do-you-make-sure-that-your-code-is-both-safe-and-fast) more modular and maintainable. Here’s a guide to get you started with templates in Knockout.js. #### Step 1: Setting Up Your Project Ensure you have Knockout.js included in [your project](https://answers.mindstick.com/qa/93843/is-it-necessary-to-add-bootstrap-js-and-bootstrap-css-both-in-your-project). You can include it via a CDN: ```html Bootstrap demo ``` #### Step 2: Creating Templates Templates in Knockout.js can be defined in script tags or directly in HTML. Here's an example of both: ## In Script Tags: ```javascript ``` ## Direct in HTML ```html ``` #### Step 3: Binding Templates to View Models To use a template, bind it to a part of your [view model](https://www.mindstick.com/forum/157861/what-is-the-difference-between-a-view-model-and-a-model-in-knockoutjs) using the `template` binding. ## View Model: ```javascript function Person(name, age) { this.name = name; this.age = age; } function AppViewModel() { this.people = ko.observableArray([ new Person('John Doe', 25), new Person('Jane Smith', 30) ]); } ko.applyBindings(new AppViewModel()); ``` ## Applying the template ```html
``` #### Step 4: Using Named Templates You can also create named templates to be reused in multiple places. ## Define Named Template: ```html ``` ## Use Named Template in Multiple Places: ```html
``` #### Step 5: Organizing Templates in External Files For larger projects, it’s often better to organize templates in separate HTML files and load them as needed. **External Template File (**`templates.html`**):** ```html

Age:

``` ## Load and Use the External Template: Use an [AJAX request](https://www.mindstick.com/interview/1169/how-to-identify-ajax-request-with-c-sharp-in-mvc-dot-net) to load the external template file and append it to the DOM. ```javascript $(function() { // Load external template file $.get('templates.html', function(templates) { $('body').append(templates); // Apply bindings after templates are loaded function Person(name, age) { this.name = name; this.age = age; } function AppViewModel() { this.people = ko.observableArray([ new Person('John Doe', 25), new Person('Jane Smith', 30) ]); } ko.applyBindings(new AppViewModel()); }); }); ``` #### Step 6: Advanced Template Features Knockout.js offers additional features like template options (`if`, `foreach`, `as`) and [custom bindings](https://www.mindstick.com/forum/160792/what-are-custom-bindings-in-knockout-js) to further [enhance your](https://yourviews.mindstick.com/view/84452/10-ppc-automation-tools-to-enhance-your-ad-campaigns) template management. **Using** `if` **and** `foreach`**:** ```html
``` ## View Model with Conditional and Looping: ```javascript // Apply bindings after templates are loaded class Person { constructor(name, age, is_selected = false){ this.name = ko.observable(name); this.age = ko.observable(age); this.is_selected = ko.observable(is_selected) } } $(function() { // Load external template file $.get('templates.html', function(templates) { $('body').append(templates); function AppViewModel() { var self = this; self.people = ko.observableArray([ new Person('John Doe', 25, true), new Person('Jane Smith', 30, false) ]); self.selectedPerson = ko.observable(self.people()[0]); } ko.applyBindings(new AppViewModel()); }); }); ``` Now combine the whole code ## index.html ```html Bootstrap demo

Selected Person

All Person

``` ## app.js ```javascript // Apply bindings after templates are loaded class Person { constructor(name, age, is_selected = false){ this.name = ko.observable(name); this.age = ko.observable(age); this.is_selected = ko.observable(is_selected) } } $(function() { // Load external template file $.get('templates.html', function(templates) { $('body').append(templates); function AppViewModel() { var self = this; self.people = ko.observableArray([ new Person('John Doe', 25, true), new Person('Jane Smith', 30, false) ]); self.selectedPerson = ko.observable(self.people()[0]); } ko.applyBindings(new AppViewModel()); }); }); ``` ## templates.html ```html

``` ## Read more [**Client-Side vs. Server-Side Validation: When to Use Each in Knockout.js**](https://www.mindstick.com/articles/336237/client-side-vs-server-side-validation-when-to-use-each-in-knockout-js) [**Integrating KnockoutJS with other technologies like ASP.NET, Node.js, or RESTful APIs?**](https://www.mindstick.com/articles/336234/integrating-knockoutjs-with-other-technologies-like-asp-dot-net-node-js-or-restful-apis) --- Original Source: https://www.mindstick.com/articles/336240/getting-started-with-templates-in-knockout-js-how-to-organize-and-reuse-ui-components Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.