title: Showing Images in knockoutjs is not working inside foreach and if condition
body: <p>Recently i have started working on knockoutjs...I have fetched the data from database to show on an html table...I have applied foreach loop since my DataTable returned more than one row..
  One of my field named "MaritalStatus" is a BIT type so on my view it is showing True/False...Instead of that i want to show an image of Tick &amp; Cross...This is my View:</p>
  
  <pre><code>&lt;form action="" method="get"&gt;
  &lt;div style="width: 990px; background-color: White; height: 710px;"&gt;
      &lt;table id="tbllist" align="center" style="border: 5px #fff solid;"&gt;
          &lt;tr&gt;
              &lt;td colspan="6"&gt;
                  &lt;h2&gt;
                      Employee List&lt;/h2&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6" style="padding: 0px;"&gt;
                  &lt;div id="title_p"&gt;
                      Listing&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th align="left"&gt;
                  Employee Code
              &lt;/th&gt;
              &lt;th align="left"&gt;
                  Employee Name
              &lt;/th&gt;
              &lt;th align="left"&gt;
                  Contact Number
              &lt;/th&gt;
              &lt;th align="left"&gt;
                  Marital Status
              &lt;/th&gt;
              &lt;th align="left"&gt;
                  Email ID
              &lt;/th&gt;
              &lt;th align="left"&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tbody data-bind="foreach:Employees"&gt;
              &lt;tr style="border-bottom: 1px solid #000000;"&gt;
                  &lt;td&gt;
                      &lt;span data-bind="text: EmployeeCode"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span data-bind="text: EmployeeName"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span data-bind="text: ContactNumber"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                       &lt;!-- here instead of true/false i wanna show an image like tick for true &amp; cross for false?????--&gt;
                      &lt;span data-bind="text: MaritalStatus"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span data-bind="text: EmailID"&gt;&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tbody&gt;
              &lt;tr style="border-bottom: 1px solid #000000;"&gt;
                  &lt;td&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p>And My View Model (continued from the above):</p>
  </blockquote>
  
  <pre><code>var EmpViewModel = function () {
          //Make the self as 'this' reference
          var self = this;
          //Declare observable which will be bind with UI 
          self.EmployeeCode = ko.observable("0");
          self.EmployeeName = ko.observable("");
          self.ContactNumber = ko.observable("");
          self.MaritalStatus = ko.observable("");
          self.EmailID = ko.observable("");
  
          //The Object which stored data entered in the observables
          var EmpData = {
              EmpCode: self.EmployeeCode,
              EmpName: self.EmployeeName,
              ContactNumber: self.ContactNumber,
              MaritalStatus: self.MaritalStatus,
              EmailID: self.EmailID
          };
  
          //Declare an ObservableArray for Storing the JSON Response
          self.Employees = ko.observableArray([]);
  
          GetEmployees(); //Call the Function which gets all records using ajax call
  
          //Function to Read All Employees
          function GetEmployees() {
              //Ajax Call Get All Employee Records
              $.ajax({
                  type: "GET",
                  url: "/Exercise/GetEmployees/",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (data) {
                      self.Employees(data); //Put the response in ObservableArray....This Also Works-----ko.mapping.fromJS(data, {}, self.Employees);
  
  
                  },
                  error: function (error) {
                      alert(error.status + "&lt;--and--&gt; " + error.statusText);
                  }
              });
              //Ends Here
          }
      };
  
      ko.applyBindings(new EmpViewModel());
       //var data = '{"Employees":[{ "ID": 2, "EmployeeCode": "E 007", "EmployeeName": "Ravi kant", "Dob": null, "Age": null, "Address": null, "ContactNumber": "8285611607", "EmailID": "sunny.kant.kumar@gmail.com", "City": null, "MaritalStatus": true, "IsReference": false, "CityList": null, "CList": null }, { "ID": 4, "EmployeeCode": "E 002", "EmployeeName": "sunny kumar", "Dob": null, "Age": null, "Address": null, "ContactNumber": "8285611607", "EmailID": "sunny.kant.kumar@gmail.com", "City": null, "MaritalStatus": false, "IsReference": false, "CityList": null, "CList": null }, { "ID": 6, "EmployeeCode": "E 002", "EmployeeName": "sunny kumar", "Dob": null, "Age": null, "Address": null, "ContactNumber": "8285611607", "EmailID": "sunny.kant.kumar@gmail.com", "City": null, "MaritalStatus": false, "IsReference": false, "CityList": null, "CList": null }, { "ID": 7, "EmployeeCode": "123", "EmployeeName": "sunny kumar", "Dob": null, "Age": null, "Address": null, "ContactNumber": "8285611607", "EmailID": "sunny.kant.kumar@gmail.com", "City": null, "MaritalStatus": true, "IsReference": false, "CityList": null, "CList": null }, { "ID": 8, "EmployeeCode": "123", "EmployeeName": "fd", "Dob": null, "Age": null, "Address": null, "ContactNumber": "8285611607", "EmailID": "sunny.kant.kumar@gmail.com", "City": null, "MaritalStatus": true, "IsReference": false, "CityList": null, "CList": null}]}';
  </code></pre>