Question

最近我开始研究knockoutjs ...我从数据库中获取数据以显示在html表上...我已经应用了foreach循环，因为我的DataTable返回了多行... 我的一个名为“MaritalStatus”的字段是BIT类型，所以在我看来它显示的是真/假......而不是我想要显示Tick＆amp;的图像。交叉...这是我的观点：

<form action="" method="get">
<div style="width: 990px; background-color: White; height: 710px;">
    <table id="tbllist" align="center" style="border: 5px #fff solid;">
        <tr>
            <td colspan="6">
                <h2>
                    Employee List</h2>
            </td>
        </tr>
        <tr>
            <td colspan="6" style="padding: 0px;">
                <div id="title_p">
                    Listing</div>
            </td>
        </tr>
        <tr>
            <th align="left">
                Employee Code
            </th>
            <th align="left">
                Employee Name
            </th>
            <th align="left">
                Contact Number
            </th>
            <th align="left">
                Marital Status
            </th>
            <th align="left">
                Email ID
            </th>
            <th align="left">
            </th>
        </tr>
        <tbody data-bind="foreach:Employees">
            <tr style="border-bottom: 1px solid #000000;">
                <td>
                    <span data-bind="text: EmployeeCode"></span>
                </td>
                <td>
                    <span data-bind="text: EmployeeName"></span>
                </td>
                <td>
                    <span data-bind="text: ContactNumber"></span>
                </td>
                <td>
                     <!-- here instead of true/false i wanna show an image like tick for true & cross for false?????-->
                    <span data-bind="text: MaritalStatus"></span>
                </td>
                <td>
                    <span data-bind="text: EmailID"></span>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr style="border-bottom: 1px solid #000000;">
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</form>

和我的观点模型（从上面继续）：

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 + "<--and--> " + 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}]}';

Answer 1

将self.MaritalStatus = ko.observable("");更改为self.MaritalStatus = ko.observable(false);

并使用此

<img src="tick.png" data-bind="visible : MaritalStatus" />

<img src="cross.png" data-bind="visible : !MaritalStatus"/>

而不是

<span data-bind="text: MaritalStatus"></span>

选中 JSFiddle

在knockoutjs中显示图像并不适用于foreach和条件

1 个答案: