2012-03-05 7 views
3
 <html> 
<head> 
    <script language="javascript" src="knockout-2.0.0.js"></script> 
    <script language="javascript" src="knockout.mapping.js"></script> 
</head> 
    <div id="divFilter"> 
     Name <input type=text data-bind="value:NAME1"></input> 
     <br> 
     Address<input type=text data-bind="value:ADDRESS"></input> 
     <br> 
     DOB <input data-bind="value:DOB" id="DOB" name="DOB" type=text></input> 
     <br> 
     SSN <input data-bind="value:SSN" id="SSN" type=text></input> 
    </div> 
</html> 
<script>     
    var oVM_Summary=null; 
    var VM_Summary= function(name1,address) 
    { 
     this.NAME1=ko.observable(name1); 
     this.ADDRESS=ko.observable(address);    
    }; 
    oVM_Summary=new VM_Summary('Jon','123 addr'); 
    ko.applyBindings(oVM_Summary); 
</script> 

を使用してHTML要素を結合します。編集内容からどの部分DOBとSSNショー[オブジェクトHTMLInputElementの】 質問コードは、次に実行されますノックアウト

Thanks in advance... 
+0

+1、興味深いシナリオ – sll

答えて

2

更新:あなたのビューモデルがDOBSSNプロパティが含まれていない場合はバインドしようとすると、それが

出てエラーになります。あなたのケースでは、これは実際には起こっていません。なぜなら、多くのブラウザでは、ウィンドウオブジェクトからIDで要素にアクセスできるからです。したがって、あなたのプロパティを見つけるのではなく、入力要素であるwindow.DOBwindow.SSNが見つかります。

idsでDOBSSNの名前を変更すると、KOエラーが表示されます。空の場合でもビューモデルで定義する必要があります。あなたのコメントに基づいて

更新:

ko.applyBindings(new VM_One(), document.getElementById("one")); 
ko.applyBindings(new VM_Two(), document.getElementById("two")); 
:次のようになり

<div id="divFilter"> 
     <div id="one"> 
     Name <input type="text" data-bind="value:NAME1" /> 
     <br/> 
     Address<input type="text" data-bind="value:ADDRESS" /> 
     </div> 
     <div id="two"> 
      DOB <input data-bind="value:DOB" id="DOB" name="DOB" type="text" /> 
      <br /> 
      SSN <input data-bind="value:SSN" id="SSN" type="text" /> 
     </div> 
    </div> 

applyBindingsコール:あなたは複数のビューモデルにバインドしたい場合 は、その後、あなたのような何かをするのいずれかが必要になります

またはできること:

<div id="divFilter"> 
     <div data-bind="with: one"> 
     Name <input type="text" data-bind="value:NAME1" /> 
     <br/> 
     Address<input type="text" data-bind="value:ADDRESS" /> 
     </div> 
     <div data-bind="with: two"> 
      DOB <input data-bind="value:DOB" id="DOB" name="DOB" type="text" /> 
      <br /> 
      SSN <input data-bind="value:SSN" id="SSN" type="text" /> 
     </div> 
    </div> 

JSは次のようになります。

var viewModel = { 
    one: new VM_One(), 
    two: new VM_Two() 
}; 

ko.applyBindings(viewModel); 
+0

終了タグを追加しましたが、まだエラーが表示されています。 – user1250206

+0

が更新されました。 –

+0

お返事ありがとうございます。しかし、私のシナリオでは、DOBとSSNを他のビューモデルにバインドしたいと考えています。 – user1250206

0

あなたはDOBSSNにバインドすることはできません。それらはビューモデルには存在しません。 これらを追加すると問題なく動作します。

0

これは、ユーザーエクスペリエンスをどのようにしたいかによって異なります。 DOBフィールドが完全に回避されるようにしますか?または、それを表示したいのですが、デフォルト値を使用しますか?

'if'バインディングを使用してバインディングを完全に回避することができます。 'if'バインディングは式を評価し、trueの場合は含まれている要素を処理します。それ以外の場合は、含まれる要素を無視します。

「はコメントコンテナは、」バインディング「場合」は、例えば、ホストするために非常に便利です。一方

<!-- ko if:DOB --> 
    DOB <input data-bind="value:DOB" id="DOB" name="DOB" type=text></input> 
    <br> 
<!-- /ko --> 

、ご希望の経験がコンテンツを保持しますが、nullまたは未定義の値を交換する場合デフォルト値(空白など)を使用している場合、このビジネスルールを取得するためにどこかにコードを記述する必要があります。 1つの方法はknockoutjs.comで文書化されたko.computed()を使うことです。

しかし、私の2セントは、最終的には簡単には先に行くと、あなたのコンストラクタでデフォルト値と観測可能を追加することです:

var VM_Summary= function(name1,address,dob,ssn) 
{ 
    ... 
    this.DOB=ko.observable(dob||'(none)'); 
    this.SSN=ko.observable(ssn||'(none)'); 
} 

あなたはまだ同じように、あなたのコンストラクタを呼び出します。

oVM_Summary=new VM_Summary('Jon','123 addr'); 
関連する問題