드롭 다운 선택에 따라 중첩 된 배열을 얻고하게 그것을 관찰

Question

나는 다음과 같은 구현과 붙어있어

:

Feature I need to implement이

논리는 다음입니다 : 사용자가 선택한 형식에 따라, 모든 섹션이 양식에 관한 취득 . 예 : 사용자가 이름이 'T-01'인 양식을 선택하면 섹션 배열에이 양식과 관련된 모든 섹션이 채워 져야합니다. 그리고 각 섹션은 추가 계산을 위해 관찰 가능해야합니다. 섹션 모델 여기

function Form(name, title, max, total, sections) { 
    this.Name = ko.observable(name); 
    this.Title = ko.observable(title); 
    this.MAX = ko.observable(max); 
    this.Total = ko.observable(total); 
    this.Sections = ko.observableArray(sections); 
    this.addSection = function() { 
    this.Sections.push(new Section()); 
    }.bind(this); 
} 

var FormOptions = ko.observableArray(['T-01', 'T-02', 'T-03']); 

: 그리고 여기

내 양식 모델입니다

function Section(section, criteria, is, cs, nc, fc, totalInitialScores, totalFinalScores) { 
    this.Section = ko.observable(section); 
    this.Criteria = ko.observable(criteria); 
    this.IS = ko.observable(is); 
    this.CS = ko.observable(cs); 
    this.NC = ko.observable(nc); 
    this.FC = ko.observable(fc); 
    this.TotalInitialScores = ko.observable(totalInitialScores); 
    this.TotalFinalScores = ko.observable(totalFinalScores); 
} 

내가 루트 수준에서 몇 가지 모델을 가지고,하지만 난 확실하지, 여기에 포함되지 않습니다 필요한 경우.

Answer 1

ko.pureComputed 또는 ko.computed 속성을 사용하여 동적 데이터 선택을 만들 수 있습니다.

지금까지 내가 당신이 보여준 코드 (불행히도,하지 작업 조각 ...)이 관찰 컬렉션이 있습니다에서 말할 수 :

• Name 문자열의 관찰 배열
• 당신은 너무 같은 형태의 새로운 배열을 만들 Array.prototype.filter 및 Array.prototype.includes을 사용할 수 있습니다

비슷한 Name 속성이 Form보기 모델의 관찰 배열 :

const selectedForms = allForms.filter(f => selectedNames.includes(f.name)); 

영어로 "선택한 이름 목록에 나타나는 이름이있는 양식 목록으로 돌아갑니다"라고 말합니다. 우리가 계산에이 코드를 포장하고 모든 관찰 특성에 종속성을 만들 경우

이제, 당신이 얻을 : 그것의 필요 및 해당 종속성 중 하나 updates.So 때마다

var selectedForms = ko.pureComputed(function() { 
    return allForms().filter(function(form) { 
    return FormOptions().includes(form.Name()); 
    }); 
}); 

이 계산 된 업데이트를 추가 할 때 Name 속성이 변경되거나 FormOptions이 변경되면 allForms에서 양식을 제거합니다.

이제 선택한 양식 목록을 얻었으므로 계산 된 두 번째 섹션 목록을 만들 수 있습니다. 이 선택한 형태의 부분의 연결이다 :

var selectedFormsSections = ko.pureComputed(function() { 
    return selectedForms().reduce(function(allSections, form) { 
    return allSections.concat(form.Sections()); 
    }, []); 
}); 

이 배열 업데이트 할 때 중 하나를 선택한 형태의 변경, 또는 섹션을 추가 할 때/이러한 양식 중 하나에/제거.