ノックアウトJSと私は、データベースから来たオブジェクトの私のリストは次のようになりように、データベースから取得されるデータに基づいて動的に生成されたテーブル持っているにtextInput変更

Question

時に$アヤックスを実行：

public string Account { get; set; } 
public string Description { get; set; } 
public decimal A2Year { get; set; } 
public decimal A1Year { get; set; } 
public decimal B1Year { get; set; } 
public decimal Current { get; set; } 
public decimal Proposed { get; set; } 
public IEnumerable<CustomerInfo> UserSalaries { get; set; } 

を私はこれを取得します$を使用したデータは、機能を入手アヤックス、それがリストであるので、私は次のようにテーブルを生成：

<tbody data-bind="foreach: accountData"> 
    <tr class="dept-row" role="row"> 
     <td><span data-bind="text: Description"></span></td> 
     <td><span data-bind="text: Account"></span></td> 
     <td class="center-text"><a data-bind="click: function(){ $parent.showNoteDialog(Account)}"></a></td> 
     <td class="align-right"><span data-bind="text: A2Year"></span></td> 
     <td class="align-right"><span data-bind="text: B1Year"></span></td> 
     <td class="align-right"><span data-bind="text: A1Year"></span></td> 
     <td class="align-right"><span data-bind="text: Current"></span></td> 
     <td><input class="align-right dollar-amount" data-bind="textInput: Proposed" /></td> 
    </tr> 
</tbody> 

表が適切に生成され、私のビューモデルに私は次の行があります。

を

私が達成しようとしているのは、KnockoutJSの新機能です。入力値が「提案された」ときに、この値をデータベースに保存するために$ .ajax関数を呼び出したいと思います。私は、 "hasFocus"をバインドして読み込み、フィールドを離れるときにajaxを呼び出すことができましたが、すべての入力フィールドがまったく同じバインディングを持つため、hasFocusバインディングを追加するとテーブルを生成できませんでした。どのようにこれを達成するための任意の提案？提案された値は、それ自身の観測可能な配列にあるか、オブジェクトのリスト全体を追跡するだけで十分ですか？究極の質問は、データが変更されたときにデータを保存するためにajax関数を呼び出す方法です。私が正しく理解している場合は

Answer 1

、あなたがこれらの要件を持っている：

1. あなたは、Ajax関数が呼び出さしたいときProposedの値が変化します。
2. Proposedの入力フィールドのフォーカスが失われた場合にのみ、値が変更されたときにajax関数を呼び出す必要があります。

正しいですか？その場合

、これらの変更を行う必要があります。

1. 変更データバインディングProposedの「の値」から「にtextInput」から、data-bind="value: Proposed"のように。
2. バインディングは、Proposed自体が観測可能な場合にのみ機能します。実際、すべての値は観測可能である必要がありますIFこれらは変更される予定であり、これらの変更をUIに動的に反映する必要があります。 observables配列内でobservablesを使用できます。
3. Proposedの値が変更されるたびにajax関数を呼び出すには、その変更を聞くことができるように、「購読する」必要があります。 - extendersを使用

   self.Proposed.subscribe(function(newValue){ 
       //call ajax 
   }); 
   

   高度な、より構造化された方法： -

基本的な方法subscribe関数を使用します。