Question

我有这个工作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.avalaibleMeals之后立即关闭，而它不应该......

我该如何解决？

Answer 1

您是否尝试过重写此功能以使用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()

Answer 2

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

Answer 3

我复制了你的代码并且编译得很好（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

Coffeescript编译错误

3 个答案: