CODEWITHSUNDEEP
knockout.jsrequirejs
Ancient
Ancient

Reputation: 3057

require js not working with knockout

I am using require js in mvc4 .

View

<script data-main="/scripts/about" src="/scripts/require.js" ></script>
<article>
<p>
    Use this area to provide additional information.
</p>
</article>

about.js

   require.config({

    paths: {
        page1: '/Scripts/page1',
        page2: '/Scripts/page2',
        knockout : '/Scripts/knockout-2.2.0'
      }

    });

     require(['page1', 'page2','knockout'], function (page1, page2) {

     var car = new page1.Car();
      car.speed(60);

      var cycle = new page2.Cycle();
      cycle.speed(20);



      console.log(car.speed());
     console.log(cycle.speed());
  });

page1.js

    define(function(){

    function Car() {

    var self = this;
    self.speed = ko.observable();

     }

     });

page2

  define(function () {

  function Cycle() {

    var self = this;
    self.speed = ko.observable();

   }

   });

In console it says Car is undefined.

Update

  define(['knockout'],function(ko){

   function Car() {

    var self = this;
    self.speed = ko.observable();
    return {
        speed: self.speed() // But don't forget to declare it in the returned object!
       };
     }

  });

I did this in both page1 and page2

Thanks in advance

Upvotes: 1

Views: 3307

Answers (3)

Gaurang s
Gaurang s

Reputation: 842

you can try this

 define(function () {

      function Cycle() {

        var self = this;
        self.speed = ko.observable();

       }

    ///////////////////ADDD   THISSSS NEWWWW LINEEEE//////////

    return new cycle();

   });

Upvotes: 0

Kyeotic
Kyeotic

Reputation: 19867

Your modules need to return the code that they represent. For example, your Car module should look like this:

define(function(){    
    function Car() {
        var self = this;
        self.speed = ko.observable();
    };    
    return Car;
 });

The module has to represent something when it is done, either a function (to construct objects), or an object (to represent a singleton). Once your module is defined, you require it in another module to use it.

define(['pathtoCar/relativeToDataMainAttribute/fromRequireScriptTag'], 
function(Car){
    var ferrari = new Car();
    ...
 });

Upvotes: 0

Wojciech Czerniak
Wojciech Czerniak

Reputation: 1288

AFAIK requirejs isolates loaded libraries to single file. In your page1 and page2 there is no knockout loaded therefore ko namespace is not defined so ko.observables are not defined and when you create new Car it will be undefined. To fix this you should load knockout in page1 and page2 also providing ko namespace as function argument:

define(['knockout'], function(ko){

  function Car() {

    var self = this;
    self.speed = ko.observable();

  }

});

or using ko = require('knockout'); or loading a shim for knockout to be a global namespace

EDIT:

At least you tried. So here is follow up.

When you do define, there is this function you provide with all your view model and other. It is requirejs function and this function should return something (i.e. your viewModel). This way you can have private and public variables and functions inside defined module.

define(['knockout'], function(ko){

  var Car = function () {
    var self = this;
    self.speed = ko.observable();
  }

  return Car;
});

The name matters only for this module scope. In your about.js when you import your module you can decide how it will be called:

//load page1 script and give returned object 
//(this case a constructor) name: createCar
require(['page1'], function (createCar) {

  // now create new instance of your Car function:
  var car = new createCar();
  car.speed(60);

  console.log(car.speed());
});

Upvotes: 1

Related Questions