CODEWITHSUNDEEP
javascriptcoffeescript
Matteo Pagliazzi
Matteo Pagliazzi

Reputation: 5270

Coffescript wrong compilation

I have this working JS:

$(function() {

  // Class to represent a row in the seat reservations grid
  function SeatReservation(name, initialMeal) {
      var self = this;
      self.name = name;
      self.meal = ko.observable(initialMeal);

      self.formattedPrice = ko.computed(function() {
          var price = self.meal().price;
          return price ? "$" + price.toFixed(2) : "None";        
      });    
  }

  // Overall viewmodel for this screen, along with initial state
  function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);

    // Computed data
    self.totalSurcharge = ko.computed(function() {
       var total = 0;
       for (var i = 0; i < self.seats().length; i++)
           total += self.seats()[i].meal().price;
       return total;
    });    

    // Operations
    self.addSeat = function() {
        self.seats.push(new SeatReservation("", self.availableMeals[0]));
    }
    self.removeSeat = function(seat) { self.seats.remove(seat) }
  }

  ko.applyBindings(new ReservationsViewModel());

});

ported to this Coffee Script 

$ ->
  SeatReservation = (name, initialMeal) ->
    self = this
    self.name = name
    self.meal = ko.observable(initialMeal)
    self.formattedPrice = ko.computed(->
      price = self.meal().price
      (if price then "$" + price.toFixed(2) else "None")
    )
  ReservationsViewModel = ->
    self = this
    self.availableMeals = [
      mealName: "Standard (sandwich)"
      price: 0
    ,
      mealName: "Premium (lobster)"
      price: 34.95
    ,
      mealName: "Ultimate (whole zebra)"
      price: 290
     ]
    self.seats = ko.observableArray([ new SeatReservation("Steve", self.availableMeals[0]), new SeatReservation("Bert", self.availableMeals[0]) ])
    self.totalSurcharge = ko.computed(->
      total = 0
      i = 0

      while i < self.seats().length
        total += self.seats()[i].meal().price
        i++
      total
    )
    self.addSeat = ->
      self.seats.push new SeatReservation("", self.availableMeals[0])

    self.removeSeat = (seat) ->
      self.seats.remove seat
  ko.applyBindings new ReservationsViewModel()

which compiles into:

(function() {

  $(function() {
    var ReservationsViewModel, SeatReservation;
    SeatReservation = function(name, initialMeal) {
      var self;
      self = this;
      self.name = name;
      self.meal = ko.observable(initialMeal);
      return self.formattedPrice = ko.computed(function() {
        var price;
        price = self.meal().price;
        if (price) {
          return "$" + price.toFixed(2);
        } else {
          return "None";
        }
      });
    };
    ReservationsViewModel = function() {
      var self;
      self = this;
      return self.availableMeals = [
        {
          mealName: "Standard (sandwich)",
          price: 0
        }, {
          mealName: "Premium (lobster)",
          price: 34.95
        }, {
          mealName: "Ultimate (whole zebra)",
          price: 290
        }
      ];
    };
    self.seats = ko.observableArray([new SeatReservation("Steve", self.availableMeals[0]), new SeatReservation("Bert", self.availableMeals[0])]);
    self.totalSurcharge = ko.computed(function() {
      var i, total;
      total = 0;
      i = 0;
      while (i < self.seats().length) {
        total += self.seats()[i].meal().price;
        i++;
      }
      return total;
    });
    self.addSeat = function() {
      return self.seats.push(new SeatReservation("", self.availableMeals[0]));
    };
    return self.removeSeat = function(seat) {
      return self.seats.remove(seat);
    };
  });

  ko.applyBindings(new ReservationsViewModel());

}).call(this);

The problem is that ReservationsViewModel gets closed right after self.avalaibleMeals while it shouldn't...

How can i solve?

Upvotes: 0

Views: 666

Answers (3)

Angelos Pikoulas
Angelos Pikoulas

Reputation: 1055

I copied your code and it compiled fine with me (CS 1.3.3)

 ReservationsViewModel = function() {
      var self;
      self = this;
      self.availableMeals = [
        {
          mealName: "Standard (sandwich)",
          price: 0
        }, {
          mealName: "Premium (lobster)",
          price: 34.95
        }, {
          mealName: "Ultimate (whole zebra)",
          price: 290
        }
      ];
      self.seats = ko.observableArray([new SeatReservation("Steve", self.availableMeals[0]), new SeatReservation("Bert", self.availableMeals[0])]);
      self.totalSurcharge = ko.computed(function() {
      .....

Perhaps something is wrong with your indentation - remember NEVER to mix tabs or spaces with coffeescript, it completely messes things up. Actually the 'community' proposes 2 spaces for indentation, check https://github.com/polarmobile/coffeescript-style-guide

Upvotes: 0

Dave Newton
Dave Newton

Reputation: 160321

Looks like the bogus indentation of the bracket may be causing the nesting to get hosed up--there's an extra space there. Indentation is really important in whitespace-delimited languages.

Upvotes: 1

Sandro
Sandro

Reputation: 4771

Have you tried rewriting this to use some of the features that CoffeeScript gives you like classes?

I can't be 100% sure the following will work, but it might be a good place for you to start.

class SeatReservation
  constructor: (@name, initialMeal) ->
    @meal = ko.observable initialMeal
    @formattedPrice = ko.computed =>
      price = @meal().price;
      if price?
        price = "$#{price.toFixed(2)}"
      else
        price = "None"

class ReservationsViewModel
  constructor: ->
    @availableMeals = [{
      mealName: "Standard (sandwich)"
      price: 0
    },{
      mealName: "Premium (lobster)"
      price: 34.95
    },{
      mealName: "Ultimate (whole zebra)"
      price: 290
    }]    

    @seats = ko.observableArray [
      new SeatReservation "Steve", self.availableMeals[0]
      new SeatReservation "Bert",  self.availableMeals[0]
    ]

    @totalSurcharge = ko.computed =>
      total = 0;
      total += seat.meal().price for seat in @seats()
      total

  addSeat: => @seats.push new SeatReservation "", self.availableMeals[0]
  removeSeat: (seat) => @seats.remove seat

$ -> ko.applyBindings new ReservationsViewModel()

Upvotes: 3

Related Questions