{"id":167,"date":"2016-03-21T23:17:52","date_gmt":"2016-03-21T22:17:52","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=167"},"modified":"2022-07-25T08:35:47","modified_gmt":"2022-07-25T07:35:47","slug":"a-knockoutjs-dynamic-component-example-using-amd","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/a-knockoutjs-dynamic-component-example-using-amd\/","title":{"rendered":"A KnockoutJS dynamic component example using AMD"},"content":{"rendered":"<p>Using <a href=\"http:\/\/knockoutjs.com\/\">KnockoutJS<\/a>, <a href=\"http:\/\/requirejs.org\/\">RequireJS<\/a> (with the <a href=\"https:\/\/github.com\/requirejs\/text\">text plugin<\/a>)<\/p>\n<p><a href=\"http:\/\/learn.knockoutjs.com\/\">http:\/\/learn.knockoutjs.com\/<\/a> is recommended!<\/p>\n<p>The component module:<\/p>\n<pre lang=\"javascript\" title=\"cmp\/main\/main.js\">\r\ndefine(['knockout'], function(ko) {\r\n    ko.components.register('app-main', {\r\n        viewModel: { require: 'cmp\/main\/main.vm' },\r\n        template: { require: 'text!cmp\/main\/main.htm' }\r\n    });\r\n    return function() {};\r\n});\r\n<\/pre>\n<p>The component view-model:<\/p>\n<pre lang=\"javascript\" title=\"cmp\/main\/main.vm.js\">\r\ndefine(['knockout'], function(ko) {\r\n\r\n\tvar SimpleListModel = function() {\r\n\t    var self = this;\r\n\r\n        self.itemToAdd = ko.observable(\"\");\r\n        self.allItems = ko.observableArray([\"Fries\", \"Eggs Benedict\", \"Ham\", \"Cheese\"]); \/\/ Initial items\r\n        self.selectedItems = ko.observableArray([\"Ham\"]);                                \/\/ Initial selection\r\n\r\n        self.addItem = function () {\r\n            if ((self.itemToAdd() != \"\") && (self.allItems.indexOf(self.itemToAdd()) < 0)) \/\/ Prevent blanks and duplicates\r\n                self.allItems.push(self.itemToAdd());\r\n            self.itemToAdd(\"\"); \/\/ Clear the text box\r\n        };\r\n\r\n        self.removeSelected = function () {\r\n            self.allItems.removeAll(self.selectedItems());\r\n            self.selectedItems([]); \/\/ Clear selection\r\n        };\r\n\r\n        self.sortItems = function() {\r\n            self.allItems.sort();\r\n        };\r\n\r\n        self.addItemOnEnter = function (data, event) {\r\n            try {\r\n                if (event.which == 13) {\r\n                    self.addItem();\r\n                    return false;\r\n                }\r\n                return true;\r\n            }\r\n            catch (e)\r\n            { }\r\n        };\r\n\r\n    };\r\n\r\n    return SimpleListModel;\r\n});\r\n<\/pre>\n<p>The component view:<\/p>\n<pre lang=\"html\" title=\"cmp\/main\/main.htm\">\r\n<div class=\"container\">\r\n    New item:\r\n    <input data-bind='value: itemToAdd, valueUpdate: \"afterkeydown\", event:{keypress: addItemOnEnter}' \/>\r\n    <button data-bind=\"enable: itemToAdd().length > 0, click: addItem\">Add<\/button>\r\n    <p>Your items:<\/p>\r\n    <select style=\"width:400px;height:300px;\"  multiple=\"multiple\" width=\"50\" data-bind=\"options:allItems, selectedOptions:selectedItems\"> <\/select>\r\n    \r\n    <div>\r\n        <button data-bind=\"click: removeSelected, enable: selectedItems().length > 0\">Remove<\/button>\r\n        <button data-bind=\"click: sortItems, enable: allItems().length > 1\">Sort<\/button>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n<p>The page main javascript file:<\/p>\n<pre lang=\"javascript\" title=\"app.js\">\r\ndefine([\"jquery\", \"knockout\"], function () {\r\n    'use strict';\r\n\r\n    var $ = require('jquery');\r\n    var ko = require('knockout');\r\n\r\n    $document.ready(function() {\r\n        require(['cmp\/main\/main'], function() {\r\n            var view = $('#content')[0];\r\n            ko.cleanNode(view); \/\/ clean any previous bindings\r\n            $(view).html('<app-main><\/app-main>'); \/\/ insert our component in the HTML\r\n            ko.applyBindings({}, view); \/\/ apply bindings to the #content element, so the app-main component is detected\r\n        });\r\n    });\r\n});\r\n<\/pre>\n<p>The page HTML:<\/p>\n<pre lang=\"html\" title=\"cmp\/main\/main.htm\">\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width\" \/>\r\n    <title>KnockoutJS components<\/title>\r\n    <link rel=\"shortcut icon\" type=\"image\/icon\" href=\"favicon.ico\" \/>\r\n    <!--<link href=\"theme\/default\/css\/index.css\" type=\"text\/css\" rel=\"stylesheet\" \/>-->\r\n<\/head>\r\n<body>\r\n    <div id=\"content\"><\/div>\r\n\r\n    <script data-main=\"app.js\" src=\"require.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Using KnockoutJS, RequireJS (with the text plugin) http:\/\/learn.knockoutjs.com\/ is recommended! The component module: define([&#8216;knockout&#8217;], function(ko) { ko.components.register(&#8216;app-main&#8217;, { viewModel: { require: &#8216;cmp\/main\/main.vm&#8217; }, template: { require: &#8216;text!cmp\/main\/main.htm&#8217; } }); return function() {}; }); The component view-model: define([&#8216;knockout&#8217;], function(ko) { var SimpleListModel = function() { var self = this; self.itemToAdd = ko.observable(&#8220;&#8221;); self.allItems = ko.observableArray([&#8220;Fries&#8221;, &#8220;Eggs [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-167","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":171,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/167\/revisions\/171"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}