2011-09-23 7 views
1

내 간단한 '종속 관찰 가능'업데이트 및 turorials 말할 함수의 구문을 제공 할 때 자바 스크립트 오류가 필요합니다. 나는 단지 관찰 가능한 세 가지 가치를 합치려고 노력하고 있습니다. 내가종속 관찰 가능한 구문 불황

<td>${G1 + G2 + G3}</td> 

를 사용하는 경우

나는 정적 디스플레이를 얻을 : 다른 입력 필드를 변경할 때 업데이트되지 않습니다.

viewModel.Series를 사용하면 값이 전혀 표시되지 않습니다. viewModel.Series를 this.G1() + this.G2()로 변경하면 G1이 함수가 아니라는 자바 스크립트 오류가 발생합니다. 여기

var initialData = {"DateId":32,"Scores":[{"Alias":"Cap Stocks","G1":129,"G2":123,"G3":222, 
var theScores = initialData.Scores; 
var viewModel = {scores : ko.observableArray(theScores) }; 
viewModel.Series = ko.dependentObservable(function() { 
    return this.G1 + this.G2 + this.G3; 
}, viewModel); 
$(function() { 
ko.applyBindings(viewModel); } 

내 템플릿은 적어도 당신은 G1, G2, G3와 속성을 관찰 할 필요가있다이 경우 뭔가

<td> ${Alias}</td> 
<td><input data-bind="value: G1"/></td> 
<td><input data-bind="value: G2"/></td> 
<td><input data-bind="value: G3"/></td> 
<td>${G1 + G2 + G3}</td> 

답변

2

를 표시하도록 결합된다. observableArray는 배열 자체에 대한 변경 사항이 있지만 항목의 개별 속성에는 변경 사항이없는 경우이를 알립니다.

mapping plugin과 같은 것을 사용하거나 점수 객체 또는 각 속성을 사용하는 생성자 함수를 사용하여 직접 매핑 할 수 있습니다.

function Score(alias, g1, g2, g3) { 
    this.Alias = alias; 
    this.G1 = ko.observable(g1); 
    this.G2 = ko.observable(g2); 
    this.G3 = ko.observable(g3); 

    this.Series = ko.dependentObservable(function() { 
     return parseInt(this.G1(), 10) + parseInt(this.G2(), 10) + parseInt(this.G3(), 10); 
    }, this); 
} 

그런 다음, 기존의 배열을지도 : 여기

var theScores = ko.utils.arrayMap(initialData.Scores, function(score) { 
    return new Score(score.Alias, score.G1, score.G2, score.G3);  
}); 

샘플 : 당신의 도움에 대한 http://jsfiddle.net/rniemeyer/SbFDR/

+0

우수 ... 만 덕분에 ... 나는 이것에 대해 생각해야합니다. 나는 배열 변화와 요소 변화 사이의 구별을 즉시 이해하지 못한다. 배열 요소는 배열입니까 ?? 나는 그것에 잠시 끓일 것이다! – Pablo

관련 문제