녹아웃 JS와 나는 동적으로 생성 된 테이블과 같이 데이터베이스에서 온 물체의 내 목록 있도록 데이터베이스에서 검색되는 데이터를 기반으로 한

Question

에서 textInput 변화에 $ 아약스를 실행 :

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. 당신은 아약스 함수를 호출 할 때 Proposed 값이 변경.
2. 값이 변경 될 때 Ajax 함수를 호출하고 Proposed의 입력 필드에 포커스가 손실 된 경우에만합니다.

맞습니까? 이 경우

, 당신은 이러한 변경을해야합니다

1. 변경 데이터 바인딩 data-bind="value: Proposed" 같이, '값'을 '에서 textInput'에서 Proposed의.
2. 바인딩은 Proposed 자체가 관찰 가능할 때만 작동합니다. 사실, 모든 값은 관찰 가능이어야합니다. IF 그들은 변경 될 것이므로 이러한 변경 사항을 UI에 동적으로 반영해야합니다. observables 배열 내에서 observables를 사용할 수 있습니다.
3. Proposed 값이 변경 될 때마다 ajax 함수를 호출하려면 변경 내용을 수신 할 수 있도록 '구독'해야합니다. - extenders를 사용

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

   고급, 더 구조화 된 방법 : -

기본 식으로 subscribe 기능을 사용하십시오.