2016-08-09 8 views
0

Knockout MVC를 처음 사용하고 선택한 날짜가 일요일 토요일 일 경우 <img />을 표시하려고합니다. 값을 변경하자마자 표시되도록하고 싶습니다 (양식 제출 없음).ko를 사용하여 Knockout MVC를 동적으로 표시합니다. Nullable 날짜가있는 경우

내 시도 "사용 (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) 

나는이 방법을 시도했지만 그것 때문에 "값()"의 바인딩을 구문 분석 할 수 있다고 말한다. bool과 TextBox가있는 CheckBox를 문자열 조건과 함께 작동하도록 만들었지 만 datetime으로는 사용할 수 없습니다.

희망 내 문제는 분명합니다.

미리 도움을 청하십시오.

Q.

답변

0

글쎄, 나는 날짜 시간과 넉 아웃 MVC를 (문자열 및 부울로 잘 작동) 사용하려고 시도 포기했다.

원하는 블록을 표시하기 위해 jQuery를 사용했습니다. 내 img (warningWeekend)에 id를 설정하고 datepicker 스크립트를 수정하십시오.

<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>