chap2 -> Creating templates -> The catalog template -> part 2

Move logic of determine color into product.js

Note: This change is not completed

ko-cart/index.html

@@ -61,7 +61,7 @@
           </tr>
         </thead>
         <tbody data-bind="foreach:catalog">
-          <tr data-bind="style:{color:stock() < 5 ? 'red' : 'black'}">
+          <tr data-bind="style:lineColor">
             <td data-bind="text:name"></td>
             <td data-bind="text:price"></td>
             <td data-bind="text:stock"></td>

ko-cart/js/models/product.js

@@ -5,10 +5,14 @@ var Product = function (id, name, price, stock) {
     _name = ko.observable(name),
     _price = ko.observable(price),
     _stock = ko.observable(stock);
+  var _lineColor = ko.computed(function() {
+    return (_stock() < 5) ? 'red' : 'black';
+  });
   return {
     id: _id,
     name: _name,
     price: _price,
     stock: _stock,
+    lineColor: _lineColor
   };
 };