咖啡脚本错误编译

Coffescript wrong compilation

本文关键字:编译 脚本错误 咖啡      更新时间:2023-09-26

我有这个工作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());
});

移植到此咖啡脚本

$ ->
  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()

编译为:

(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);

问题是ReservationsViewModel在self.avalaibleMeal之后立即关闭,而它不应该...

我该如何解决?

你有没有尝试过重写它来使用CoffeeScript给你的一些功能?

我不能 100% 确定以下内容是否有效,但这可能是您开始的好地方。

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()

看起来支架的虚假压痕可能会导致嵌套被灌干 - 那里有一个额外的空间。缩进在以空格分隔的语言中非常重要。

我复制了你的代码,它对我来说编译得很好(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() {
      .....

也许你的缩进有问题 - 记住永远不要将制表符或空格与 coffeescript 混合使用,它会完全搞砸事情。实际上,"社区"提出了 2 个缩进空间,请检查 https://github.com/polarmobile/coffeescript-style-guide