2011-09-17 16 views
0

私はjavacriptに関するかなり基本的な知識を持って、現時点でknockoutjsを試しています。私はこの目的のために基本的なASP.NET MVC 3アプリをセットアップしました。何も、いなくても、デフォルト値を示していないいくつかの奇妙な理由で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> 

:ここで私はホーム/ Index.cshtmlビューで設定抜粋です。 Firebugでデバッグすると、ViewModelはプロパティも空であると表示しています。私はここで何かを逃したのですか?

ありがとう、 ダニー。

を追加しました:_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

私が上記の投票で答えたのは、プレーンなWebページで試したときだけでした。私がMVCビューで試したときではありませんでした。それが判明したとき、私はスクリプトブロックを間違った位置に置いた。ページ要素が処理された後、ビューの最後に移動しました。もう1つのオプションは、$(document).ready()内にラップすることです。次に、ViewModelを含むスクリプトブロックを配置し、必要な場所にko.applyBindings()を呼び出します。

+0

はい、そうです、あなたは '$(document)'を使うべきです、私は誤って 'window'を書いてしまいました。 –

+0

それは$(document).ready()でなければなりません$(document).load()の、右か? – codedog

+0

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

1

使用$(document).load(function(){使用:

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

を見てください:http://jsfiddle.net/S8Rh5/ - それはうまく動作します。

+0

MVCビューでjsインテリセンスを与えるのは、Visual Studioの一般的な習慣のようです。その部分はブラウザにまったく表示されません。 – codedog

+0

しかしレンダリングする必要があります。 –

+0

はい、それはページのセクションのノックアウト、jquery、modernizrへの完全な参照を含むマスターレイアウトを通してレンダリングされます – codedog

関連する問題