From d18a1efd317ee9a311b1d25c5c9ad3155e053679 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Tue, 19 Apr 2022 22:55:51 +1000
Subject: [PATCH] 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           | 2 +-
 ko-cart/js/models/product.js | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index c0509c7..d078bea 100644
--- a/ko-cart/index.html
+++ b/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>
diff --git a/ko-cart/js/models/product.js b/ko-cart/js/models/product.js
index 97aa885..fc5b01d 100644
--- a/ko-cart/js/models/product.js
+++ b/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
   };
 };