Revealing Module Pattern, KnockoutJS, and CoffeeScript

Question

This may be very beginner question, or maybe I am using too many things at once. I am trying to use KnockoutJS with the Revealing Module Pattern and trying to write CoffeeScript. I have put my model in a separate function. Here is the code:

myapp =(->
    person =->
        firstname = ko.observable "k"
        lastname = ko.observable "d"

        firstname:firstname,
        lastname:lastname

    person : person
)()

$(->
    ko.applyBindings(new myapp.person())
    @
)

Now this is creating JavaScript using workbench in Visual Studio like this:

(function() {
  var myapp;

  myapp = (function() {
    var person;
    person = function() {
      var firstname, lastname;
      firstname = ko.observable("k");
      lastname = ko.observable("d");
      return {
        firstname: firstname,
        lastname: lastname
      };
    };
    return {
      person: person
    };
  })();

  $(function() {
    ko.applyBindings(new myapp.person());
    return this;
  });

}).call(this);

Now this is giving error that it could now found element to bound. Here is the simple HTML text:

<p>
    Firstname<span data-bind="text: myapp.person().firstname"></span>
    Lastname<span data-bind="text: myapp.person().lastname">
    </span>
</p>

If I create normal JavaScript without self called function it working fine. Here is the function:

myapp = (function () {
    var person;
    person = function () {
        var firstname, lastname;
        firstname = ko.observable("k");
        lastname = ko.observable("j");

        return {
        firstname : firstname,
        lastname : lastname
        }
    }

    return {
        person: person
    }
})();


$(function () {
    ko.applyBindings(new myapp.person());
})

Can anyone explain what is going wrong here? Or is there another way to write CoffeeScript to use KnockoutJS?

Please comment if further details are needed.

Luffy Luffy · Accepted Answer · 2012-08-02T14:15:52

Here is the working example : http://jsfiddle.net/gurkavcu/Kqa2k/

myapp = (->
    person =->
        firstname = ko.observable "jack"
        lastname = ko.observable "sparrow"

        firstname:firstname,
        lastname:lastname

    person : person
)()

$(->
    ko.applyBindings(new myapp.person())
    @
)

You need to change bind syntax :

<p>
    Firstname: <span data-bind="text:firstname"></span>
    Lastname: <span data-bind="text:lastname">
    </span>
</p>

Because when you call ko.applyBindings(new myapp.person()) you set your view for only a person object not all myapp object.

If you want to set your view for whole myapp you need to change your code like this :

JSfiddle Link

myapp = (->
    person = (fname,lname)->
        firstname = ko.observable fname
        lastname = ko.observable lname

        firstname:firstname,
        lastname:lastname

    person : new person("Jack" , "Sparrow")    

)()

$(->
    ko.applyBindings(myapp)    
    @
)

<p>
    Firstname: <span data-bind="text:person.firstname"></span>
    Lastname: <span data-bind="text:person.lastname">
    </span>
</p>

Revealing Module Pattern, KnockoutJS, and CoffeeScript

1 Answers