CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.jsrequirejs
Sid Kwakkel
Sid Kwakkel

Reputation: 799

External component Knockout and Require

I'm just learning knockout and I need some help. My menucomponent won't show up (i.e. it should say "Boo ya ka sha"). In chrome (under the scripts inspector) I can see that htmlString is set properly (i.e. to the contents of components/menu.html). Help, please.

index.html

<html>
<head>
  ...
  <script data-main="js/app" src="js/require.js"></script>
</head>
<body>
  ...
  <menucomponent></menucomponent>
</body>
</html>

js/app.js

requirejs.config({
  "baseUrl": "js",
  "paths": {
    "app": "app",
    "jquery": "jquery-2.2.3",
    "knockout":"knockout-3.4.0",
    "main": "main",
    "menu": "../components/menu",
    "text": "require-text"
  }
});
// make a component called menucomponent
require(['knockout'], function(ko) {
  ko.components.register('menucomponent', {require: 'menu'});
});
// Load the main app module to start the app
requirejs(["main"]);

components/menu.js

define(['knockout','text!./menu.html'], function(ko, htmlString) {
  function menuViewModel() {
    this.myMessage = ko.observable("Boo ya ka sha");
  }
  return { viewModel: menuViewModel,
           template: htmlString
         };
});

components/menu.html

<div data-bind='text: myMessage'></div>

Upvotes: 0

Views: 157

Answers (1)

Razi Syed
Razi Syed

Reputation: 289

Knockout supports amd registration for viewmodel only, so try this:

In js/app.js, change your component registration to:

require(['knockout','text!./menu.html'], function(ko, htmlString) {
  ko.components.register('menucomponent', {
     viewModel: { require: 'menu'},
     template: htmlString
  });

and change components/menu.js to:

define(['knockout'], function(ko) {
  function menuViewModel() {
     this.myMessage = ko.observable("Boo ya ka sha");
  }
  return menuViewModel;
});

Upvotes: 0

Related Questions