Question

嗨:)我是Knockout的新手。我有一些问题，我没有解决，我想我在stackoverflow和整个网络中看到了所有可能的解决方案，我只是想弄清楚:(

上表没有Knockout js，现在我试图将其转换为：

上面的tabke代码：

<table class="table">

    <tr>
        <th>
            Driver ID
        </th>
        <th>
            Name
        </th>

        <th>
            Phone number
        </th>
        <th>
            Work exp. (days)
        </th>
        <th>
            Last vision test
        </th>

        <th></th>
    </tr>

    @foreach (var item in Model)
    {

        string style = "";
        var months = ((DateTime.Today.Year - item.visionTDate.Year) * 12 + (DateTime.Today.Month - item.visionTDate.Month));
        if (months >= 5 && months < 6)
        {
            style = "background-color:#b3b3ff";
        }
        if (months >= 6)
        {
            style = "background-color:#ff6666";
        }

        <tr style="@style">


            <td>
                @Html.DisplayFor(modelItem => item.DriverId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.firstName)  @Html.DisplayFor(modelItem => item.lastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.tel)
            </td>
            <td>
                @{ var days = ((DateTime.Today - item.startDate).TotalDays);}
                @days

            </td>
            <td>

                @Html.DisplayFor(modelItem => item.visionTDate)
            </td>

            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.DriverId }) |
                @Html.ActionLink("Details", "Details", new { id = item.DriverId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.DriverId })
            </td>


        </tr>
                    }

</table>

我试图用Knockout js做的第二个表代码： VIEW

<table class="table">
                        <thead>
                            <tr>
                                <th>Driver Id</th>
                                <th>Name</th>
                                <th>Phone number</th>
                                <th>Work exp. (days)</th>
                                <th>Last vision test</th>
                                <th>  </th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: drivers">
                            <tr>
                                <td data-bind="text: DriverId"></td>
                                <td data-bind="text: firstName + ' '+ lastName"></td>
                                <td data-bind="text: tel"></td>
                                <td data-bind="text: startDate"></td>
                                @*<td data-bind="text: moment(visionTDate()).format('L') "></td>*@
                                <td data-bind="text: visionTDate"></td>
                                @*<td>
                                    <a data-bind="attr: { 'href': '@Url.Action("Edit")/' + DriverId() }" >
                                        Edit 
                                    </a> |
                                    <a data-bind="attr: { 'href': '@Url.Action("Details")/' + DriverId() }" >
                                        Details 
                                    </a>|
                                    <a data-bind="attr: { 'href': '@Url.Action("Delete")/' + DriverId() }" >
                                       Delete
                                    </a>
                                </td>*@

                            </tr>
                    </table>

查看模型

     <script>
                        var drivers

                        $.getJSON("/Drivers/GetAllDrivers", function (data) {
                            drivers = data
                            ko.applyBindings(drivers)
                        })

                        function GetStyle(date) {
                            var style = "";
                            var months = ((DateTime.Today.Year - date.Year) * 12 + (DateTime.Today.Month - date.Month));
                            if (months >= 5 && months < 6) {
                                style = "background-color:#b3b3ff";
                            }
                            if (months >= 6) {
                                style = "background-color:#ff6666";
                            }
                        }

                    </script>

（有人评论因为它不起作用）。

所以我被卡住了？

无论我是否尝试过 - 它只是不显示它所适用的日期。正如你在下面的代码中看到的那样，我尝试了Moment，但似乎没有任何事情发生，但所有的行，但第一个似乎消失了： Here u can see
1. 我可以通过你在评论代码中看到的方式将它与MVC动作链接绑定，但是这里 - 它使得行消失得像2 ^并且链接是不可点击的。

3.由于您可以看到颜色的行和视图模型代码，如果自上次视觉日期起6个月或更长时间，我需要该行为红色，如果已经过了5-6个月则为蓝色，否则为默认颜色。除此之外，将工作日期从日期转换为天数（数字），就像我在上表中所做的那样。我试图编写一个函数来在视图模型中执行颜色，但它也不起作用..

感谢

Knockout - 日期绑定，ActionLink绑定

0 个答案: