2016-03-27 4 views
1

MVC、ブートストラップ、Knockoutjsに関する書籍を扱っています。これはknockoutjsで初めてのことですが、まだ一般的には比較的新しいコーディングです。ここで私はこのチュートリアルで達成しようとしているものです。ビュー内からデータを生成しないKnockoutjsを使用するデータバインディングスクリプト

私はKnockoutjsライブラリをダウンロードして、このような@RenderSection("Scripts", false)上記の私_layout.cshtmlファイルでそれを参照した。..

<environment names="Development">  
     <script src="~/lib/jquery/dist/jquery.js"></script> 
     <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
     <script src="~/js/site.js" asp-append-version="true"></script> 
    </environment> 
    <environment names="Staging,Production"> 
     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" 
       asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
       asp-fallback-test="window.jQuery"> 
     </script> 
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js" 
       asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" 
       asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"> 
     </script> 
     <script src="~/js/site.min.js" asp-append-version="true"></script> 
     <script src="~/lib/knockoutjs/dist/knockout.js"></script> 
    </environment> 
    @RenderSection("Scripts", false) 
</body> 

私は、次のコードでBasic.cshtmlという名前のビューを作成

入力時にIntellisenseが@sectionスクリプト構文を選択していないことには注意してください。

理論上は、これは_layout.cshtmlを使用してXXXX/home/basicに移動し、knockoutjsのデータバインディングの値を 'Hello Not Eric McQuiggan'に渡すときにビューを生成するはずです。ただし、デバッグ時には、ページにはヘッダーテキスト( 'Hello')のみが表示され、その他は表示されません。

明らかに、これはスクリプトが実行されていないことを意味します。私は逃したかもしれないものについての追加情報を見つけようとしましたが、私は終わりです。私はそれが何か小さいことに終わると確信していますが、どんな助けも高く評価されます。

ありがとうございます!

+0

私はasp.netには入っていませんが、applyBindingsをdocument.ready関数に入れてみてください。スクリプトが最初に実行されたと思われますが、必要なDOMはまだありません。これはKnockoutJSのよくある間違いです。例えば$(function(){ko.applyBindings(viewModel);}) – Adrian

+0

コンソールにエラーがありますか?私はそこにいくつかあるべきだと思う。 – Dnyanesh

答えて

2

ASP.NET Coreは、複数の作業をサポートしていますenvironments

これを指定しないと、デフォルトの環境はdevelopmenetになります。

レイアウトでは、一致する環境を使用している場合は、出力にコンテンツのみを書き込むenvironmentタグヘルパーエレメントを使用しています。

のでdevelopmentモードでは、あなたのHTMLは次のようになります。

<environment names="Development">  
    <script src="~/lib/jquery/dist/jquery.js"></script> 
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="~/js/site.js" asp-append-version="true"></script> 
</environment> 
<!-- this is not included in the outputted HTML when in development mode --> 
<!-- <environment names="Staging,Production"> 
    ... 
</environment> --> 
@RenderSection("Scripts", false) 

のでKncokoutは、この場合にロードされていない、とあなたのブラウザのコンソールでko is undefinedエラーが表示されるはずです。

<environment names="Development">  
    <script src="~/lib/jquery/dist/jquery.js"></script> 
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="~/js/site.js" asp-append-version="true"></script> 
    <script src="~/lib/knockoutjs/dist/knockout.js"></script> 
</environment> 

注意:あなたがdevelopmentスクリプトセクションにもノックアウトの参照を含める必要が

修正は、非常に簡単です、あなたは正しい場所やASPでknockout.js持っていることを確認してください。 NETコアは、その場所からファイルをサーバーするように構成されています。

+0

ありがとう!私はそれが参照の配置について何か小さいものでなければならないことを知っていたが、どこに行くべきかは分からなかった。 –

関連する問題