녹아웃 동적 바인딩 문제

Question

녹아웃 매핑 플러그인을 통해 생성 된 다음 ViewModel을 고려하십시오.

var originalData = { 

"QuoteSelectedViewModel": { 
    "ProductName": "Select",  
    "CoverQuotesViewModel": [ 
    { 
     "Code": 1, 
     "Label": "Première Assistance 24h/24 (GRATUITE)", 
     "IsMandatory": true, 
     "IsSelected": true,    
     "DependsOn": [] 
    }, 
    { 
     "Code": 2, 
     "Label": "Assistance PLUS 24h/24", 
     "IsMandatory": false, 
     "IsSelected": false,   
     "DependsOn": [] 
    }, 
     { 
     "Code": 8, 
     "Label": "Heurts Animaux/Force de la Nature", 
     "IsMandatory": false, 
     "IsSelected": false,   
     "DependsOn": [ 
      2 
     ] 
    }, 
    ]} 
} 

var viewModel = ko.mapping.fromJS(originalData); 

ko.applyBindings(viewModel); 


<div data-bind="with: QuoteSelectedViewModel"> 
selected quote is : <span data-bind="text: ProductName"></span> 
<!-- ko foreach: CoverQuotesViewModel --> 
<br/>  
    <div data-bind: if: IsVisible> 
    <input type="checkbox" data-bind="checked: IsSelected"></input> 
    <input type="text" data-bind="value: Label, enable: IsSelected"></input> 
    </div> 
<!-- /ko --> 
</div> 

이제는 IsVisible이 false를 반환 할 때 div를 숨기려고합니다. IsVisible은 아직 존재하지 않으며 CoverQuotesViewModel 배열의 각 요소에 대해 계산 된 관찰 가능 함수 여야합니다.

이 계산 된 관측 가능 함수를 각 요소에 어떻게 생성합니까?

감사

[편집] 내가 여기 jsfiddle 추가 한 :

: http://jsfiddle.net/graphicsxp/fpKWM/

[EDIT2] 사실 녹아웃 문서가 작업을 수행하는 방법에 대한 명확한를

물론, 생성 콜백에서 원하는 경우 ko.mapping.fromJS를 다시 호출 할 수 있습니다. 당신은 몇 가지 추가 계산 관찰 가능한 원래 자바 스크립트 객체를 증가시키기 위해 를 원하는 경우 일반적인 사용 예는 다음과 같을 수 있습니다

var에 myChildModel = 기능 (데이터) { ko.mapping.fromJS (데이터, {}이) ;

this.nameLength = ko.computed(function() { 
    return this.name().length; 
}, this); } 

[편집]

여기에 바울의 제안 다음 전체 코드입니다 : (getQuotesSuccess는 AJAX 성공 핸들러가이)

viewModel.getQuotesSuccess = function (result) { 
var myCoverQuotesViewModel = function (data, parent) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 

    self.IsVisible = ko.computed(function() { 
     var visible = true; 
     if (self.DependsOn().length > 0) { 
      $.each(self.DependsOn(), function (index, value) { 
       var dependency = viewModel.QuoteSelectedViewModel().CoverQuotesViewModel.filterByProperty("Code", value); 
       if (dependency().length > 0) { 
        visible = visible & dependency()[0].IsSelected(); 
       } else { 
        visible = false; 
       } 
      }); 
     } 

     return visible; 

    }, this); 
} 

var mapping = { 
    'CoverQuotesViewModel': { 
     create: function (options) { 
      return new myCoverQuotesViewModel(options.data, options.parent); 
     } 
    } 
} 

    ko.mapping.fromJS(result, mapping, viewModel); 
}; 

Answer 1

좋아, 내 이전의 대답에 다시 복귀 , 당신의 수정과 함께, 그래서이 답변을보고 다른 사람은 실제로 올바른 버전을 얻을!

이

function CoverQuotesViewModel(data) 
{ 
    var self = this; 
    ko.mapping.fromJS(data, {}, self); 

    // Copy the data to each property. 
    self.IsVisible = ko.computed(function() 
    { 
      // your logic for each quote 
    }); 
} 

그런 다음 당신은 매핑에 대한 만들 맵을 사용해야합니다

당신은 자식 viwe 모델을 만들고, 계산 관찰에 추가 한 후, 자동으로 채울 매핑 플러그인을 사용할 필요가 계산 된에 this를 전달하는 데이의 저장된 버전 자체를 참조하는대로 당신은 필요가 없습니다

var mapping = { 
    'CoverQuotesViewModel': { 
     create: function(options) { 
      var model = new CoverQuotesViewModel(options.data); 
      return model; 
     } 
    } 
} 
var viewModel = ko.mapping.fromJS(data, mapping); 

: 기본보기 모델이에 당신은 당신의 아이 뷰 모델을 만들 수 있습니다.