Динамическое отображение HTML с использованием Knockout MVC с использованием ko.If с Nullable Datetime

Я новичок в Knockout MVC и пытаюсь отобразить <img />, если выбранная дата — суббота или воскресенье. Я хочу, чтобы он отображался, как только я изменяю значение (без отправки формы).

Моя попытка заключалась в использовании "using(ko.If(...))":

МОДЕЛЬ

public class TestModel
{
    public DateTime? Date { get; set; }
    public bool Weekend
    {
        get
        {
            if (Date.HasValue)
            {
                return Date.Value.DayOfWeek == DayOfWeek.Saturday || Date.Value.DayOfWeek == DayOfWeek.Sunday;
            }

            return false;
        }
    }
}

CSHTML

@using PerpetuumSoft.Knockout
@model MyApp.TestModel
@{
     var ko = Html.CreateKnockoutContext();
}

...

@ko.Html.TextBox(x => x.Date, new { class="datefield" })
using(ko.If(x => x.Date.Value.DayOfWeek == DayOfWeek.Saturday || x.Date.Value.DayOfWeek == DayOfWeek.Sunday))
{
    <img src="~/Images/warning-icon.png" width="22" height="22" title="Warning, it's the weekend." />
}

...

<script type="text/javascript" >
$(document).ready(function () {
    $(".datefield").datepicker({ dateFormat: 'd M yy', changeYear: true });
});
</script>
@ko.Apply(Model)

Я пытался использовать этот подход, но он говорит, что не может разобрать привязку из-за «Value ()». Мне удалось заставить его работать с CheckBox с логическим значением и TextBox со строковым условием... но не с datetime.

Надеюсь, я понял свою проблему.

Заранее благодарю за любую помощь.

Q.


jquery asp.net-mvc-4 knockout-mvc
person akronnorka    schedule 09.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что ж, я отказался от попыток использовать Knockout MVC с DateTime (отлично работает со String и Bool).

Я использовал jQuery для отображения нужного блока. Просто установите идентификатор на моем img (warningWeekend) и измените скрипт выбора даты.

<script type="text/javascript" >

$('#warningWeekend').hide('fast');
    $(".datefield").datepicker({
        dateFormat: 'd M yy',
        changeYear: true,
        onSelect: function (dateText, inst) {
                var date = $(this).datepicker("getDate");
                    if (date.getDay() == 0 || date.getDay() == 6) {
                        $('#warningWeekend').show('fast');
                    }
                    else {
                        $('#warningWeekend').hide('fast');
                    }
        }
    });

</script>
person akronnorka    schedule 09.08.2016