2011-11-07 24 views
3

Javascriptの初心者として、ノックアウトを試してみることにしました。しかし、私はそれを非常に簡単なシナリオで動作させることさえできませんでした。ノックアウト・テキスト・バインディングが入力用に機能しない

私は問題が非常に単純であると推測しています。私はここでこれを尋ねるのは恥ずかしいものです。しかし、私はJavascriptをデバッグするのがうまくいかず、バグがどのように現れるかわからないので、ここでは行きます。それはasp.net MVC 3によって生成されています後

これは、ページのHTMLソースです:

<html> 

<head> 
    <title>Index</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
</head> 

<body> 

<h2>Index</h2> 

<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script> 
<script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    var viewModel = { 
     name: "Joe", 
     number: "13" 
    }; 

</script> 

<script type="text/javascript"> 
    ko.applyBindings(viewModel); 
</script> 

<ul> 
<li>Name: <input data-bind="text: name"/></li> 
<li>Number: <input data-bind="text: number"/></li> 
</ul> 

<ul> 
<li>Name: <span data-bind="text: name"></span></li> 
<li>Number: <span data-bind="text: number"></span></li> 
</ul> 

</body> 
</html> 

ジョーまたは13は、入力またはテキストボックスにバインドされません。

ko.observable()に入れてみましたが、deosも動作しません。スクリプトが実行されていないのと同じです。

FireBugを使用してデバッグを試みましたが、applyBindingが実行され、viewModelオブジェクトに正しい変数が含まれていることがわかりました。

ここでは、おそらく明らかなことがあります。ここでそれを見ることができない場合は、FireBugを使用するときに私が探すべきことを指摘できますか?


EDIT

私はまだ問題を抱えている特定のソリューションのいくつかの組み合わせを試した後。一つの解決策ではHTMLは次のようになります。

<html> 
<head> 

    <title>Index</title> 

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
    <script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
      var viewModel = { 
       name: ko.observable("Joe"), 
       number: ko.observable("13") 
      }; 
    </script> 

    <script type="text/javascript"> 
     $(function() { ko.applyBindings(viewModel); }) 
    </script> 

</head> 

<body> 
<h2>Index</h2> 

<ul> 
<li>Name: <input data-bind="text: name"></input></li> 
<li>Number: <input data-bind="text: number"></input></li> 
</ul> 

<ul> 
<li>Name: <span data-bind="text: name"></span></li> 
<li>Number: <span data-bind="text: number"></span></li> 
</ul> 

</body> 
</html> 

は、私は彼らがすべて同じ作業に使用されapplyBindingsソリューションは関係していないようです。

バインディングは最終的には動作しますが、IEとFirefoxでは動作しますが、Chromeでは動作しません。また、観測可能性は全く機能しません。私は入力フィールドに書いてフィールドを更新することはできません。

答えて

9

入力タグがバウンドする必要があります(つまり、入力ボックスにユーザーのタイプは時にモデルが更新されます。)代わりに、テキスト

例えば

Name:<input data-bind="value: name"></input> 
9

htmlが完全にロードされた後にapplyBindingsを実行する必要があります。通常、jquery.readyメソッドから呼び出すが、バインディングが必要なhtmlタグの後にapplyBindingsを含むスクリプトブロックを置くとうまくいくと思う。

+0

わかりました。このjquery.readyメソッドを使用するための規約はありますか?私はそれについて調べるために私はそれをgoogleできると思います。 –

+0

$(document).ready(ko.applyBindings(viewModel))はそのトリックを行う必要がありますか?動いていない。 –

+0

$(function(){ko。 –

2

試してください:あなたは2つの結合方法をしたい場合は

<script type="text/javascript"> 
$(function() { 


    var viewModel = { 
     name: "Joe", 
     number: "13" 
    }; 

    ko.applyBindings(viewModel); 
}); 
</script> 

...とは名前と番号が観測作る

+0

このソリューションでは、ko.observableとBertのソリューション(closebタグの下にapplybindingを設定)を提供しています。これはFirefoxとIEでは半動作しますがChromeでは動作しません。 IEでは、変数は入力ボックスとスパンの両方に表示されますが、入力が更新されると更新されません。 Firefoxでは入力ボックスに表示されませんが、ソースを表示するとタグに適用されます。クロムでは全く機能しません。 –

+0

ノックアウトのjavascriptファイルを2回参照します。一度だけ参照し、参照をheadタグに移動します。 –

0

スクリプトの値として名前を付けますバインディングコントロールの下に書かなければなりません:

関連する問題