2011-09-17 3 views
0

자바 스크립트에 대한 내 초보적인 지식으로 현재 knockoutjs를 시험 중입니다. 이 목적을 위해 기본 ASP.NET MVC 3 앱을 설정했습니다. 다음은 Home/Index.cshtml보기에서 설정 한 스 니펫입니다.ko.observable 속성의 기본값이 표시되지 않습니다.

@if(false) 
{ 
    <script src="../../Scripts/jquery-1.6.3.js" type="text/javascript"></script> 
    <script src="../../Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script> 
} 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<script type="text/javascript"> 
    var entryDataViewModel = { 
     registration: ko.observable("Registration"), 
     registeredName: ko.observable("Name"), 
     entryClass: ko.observable("Junior") 
    }; 

    ko.applyBindings(entryDataViewModel); 
</script> 

<h2>@ViewBag.Message</h2> 
<p> 
    Registration: <span data-bind="text: registration"></span><br /> 
    Name: <span data-bind="text: registeredName"></span><br /> 
    Class: <span data-bind="text: entryClass"></span><br /> 

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. 
</p> 

이상한 이유로 아무 것도 표시되지 않고 기본값도 표시되지 않습니다. Firebug를 통해 디버그하면 ViewModel이 속성도 비어있는 것으로 표시합니다. 내가 여기 뭔가를 놓친 적이 있니?

감사합니다. Dany.

ADDED : - :

<script type='text/javascript'> 
    //<![CDATA[ 
    $(document).load(function(){ 
    var entryDataViewModel = { 
     registration: ko.observable("Registration"), 
     registeredName: ko.observable("Name"), 
     entryClass: ko.observable("Junior") 
    }; 

    ko.applyBindings(entryDataViewModel); 
    }); 
    //]]> 
    </script> 

_Layout.cshtml의 내용은 모든 재고 표준 녹아웃의 추가를 제외하고 물건 및 사용 JQuery와 1.6.3

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/knockout-1.3.0beta.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
</head> 
<body> 
    <div class="page"> 
     <header> 
      <div id="title"> 
       <h1>My MVC Application</h1> 
      </div> 
      <div id="logindisplay"> 
       @Html.Partial("_LogOnPartial") 
      </div> 
      <nav> 
       <ul id="menu"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
       </ul> 
      </nav> 
     </header> 
     <section id="main"> 
      @RenderBody() 
     </section> 
     <footer> 
     </footer> 
    </div> 
</body> 
</html> 
+0

http://jsfiddle.net/ S8Rh5/ –

답변

1

위의 응답은 일반 웹 페이지에서 시도했을 때만 작동합니다. MVC보기에서 시도했을 때가 아닙니다. 그것이 나왔을 때 스크립트 블록을 잘못된 위치에 두었습니다. 페이지 요소가 처리 된 후 뷰의 끝으로 이동했습니다. 다른 옵션은 $ (document) .ready() 내에 랩핑 한 다음 ViewModel을 포함하는 스크립트 블록을 놓고 원하는 곳 어디에서나 ko.applyBindings()를 호출 할 수 있습니다.

+0

예, 맞습니다.'$ (document)'를 사용해야합니다. 실수로'window'를 작성했습니다. –

+0

그리고 $ (document) .ready()가되어야합니다. $ (document) .load()의, 맞습니까? – codedog

+0

예. http://api.jquery.com/ready/ –

1

사용 $(document).load(function(){입니다 보십시오 : http://jsfiddle.net/S8Rh5/ - 잘 작동합니다.

+0

MVC 뷰에서 js intellisense를 제공하는 것은 Visual Studio의 일반적인 관례 인 것 같습니다. 그 부분은 브라우저에 전혀 렌더링되지 않습니다. – codedog

+0

하지만 렌더링해야합니다. –

+0

예, 페이지의 섹션의 모든 녹아웃, jquery 및 modernizr에 대한 전체 참조가 포함 된 마스터 레이아웃을 통해 렌더링됩니다. – codedog

관련 문제