2012-04-19 9 views
2

KnockoutJS를 사용하여 사용자가 이미지를 볼 수있는 텍스트 상자를 자동으로 업데이트하는 입력 필드에 텍스트를 입력하여 "제품"을 편집 할 수있는 작은 응용 프로그램을 작성합니다. 이를 통해 사용자는 플라크 (Plaque)와 같은 제품을 구매하기 전에 조각 가능한 라인을 미리 볼 수 있습니다.knockoutjs - 관찰 가능한 관찰 가능 값을 가진 객체의 observableArray

self.product = ko.utils.arrayMap(jsonData, function(data) { 
    return new CustomizableProduct(
    data.sku, data.name, data.lines, data.fonts, data.plates) 
}); 
function CustomizableProduct(sku, name, lines, fonts, plates) { 
    return { 
    sku: ko.observable(sku), 
    name: ko.observable(name), 
    lines: ko.observableArray(lines), 
    fonts: ko.observableArray(fonts), 
    plates: ko.observableArray(plates) 
    } 
} 

jsonData :

var initialData = [ 
{ 
"sku": "PMW", 
"name": "Premium Genuine Walnut Step Edge Plaque", 
"plates": [ 
    { 
    "sku": "plateSKU", 
    "name": "plateName", 
    "img": "/images/plates/plateSKU.jpg"}, 
{ 
    "sku": "plateSKU2", 
    "name": "plateName2", 
    "img": "/images/plates/plateSKU.jpg"} 
], 
"lines": [ 
    { 
    "label": "Line 1", 
    "value": "Line 1", 
    "type": "input", 
    "characterLimit": "146"}, 
{ 
    "label": "Line 2", 
    "value": "Line 2", 
    "type": "input", 
    "characterLimit": "156"}, 
{ 
    "label": "Line 3", 
    "value": "Line 3", 
    "type": "submit", 
    "characterLimit": "176"} 
], 
"fonts": [ 
    { 
    "font": "Times New Roman"} 
]} 
]; 

product.lines 내가 객체 (제품)가

observableArray (product.lines)를 보유 : 그래서 여기

내 문제입니다 루프되고 개체 (값 : $ data.value)에서 설정된 기본값으로 입력 상자를 만듭니다. 이 입력란은 사용자가 편집 할 수 있습니다. 입력 된 내용의 미리보기 역할을하는 업데이트 된 종류의 입력 상자 값을 표시해야합니다. 새 단어를 입력하면 개체에서 업데이트되지만 값을 표시해야하는 필드는 업데이트되지 않습니다.

여기 내 코드의 jsFiddle이 있습니다 http://jsfiddle.net/pR6xp/2/ 나는 그것의 입력 필드를 편집하여 업데이트 할 때 업데이트 할 그 값을 얻기 위해 작성해야하는 일

?

감사합니다 ..

답변

2

당신은 라인의 observableArray을 만들 수 있지만, 객체가 자신의 특성이 관찰되지 않는 observableArray에 추가 할 때 구현할 개까지,이 남아 있습니다.

관찰 가능한 값을 가진 ProductLine 객체를 추가하고 이러한 객체를 사용하여 선 컬렉션을 초기화했습니다. 이 도움이

http://jsfiddle.net/vRBhP/1/

희망.

+0

와우 감사합니다 !! 그건 트릭을 .. 다시 한번 감사드립니다. –

+0

답변은 정확하지만 실제로 코드에 적용하는 방법을 이해할 수 없습니다. 다음은 솔루션을 가져온 이유입니다. http://code.tutsplus.com/tutorials/knockout-observables--net-31293 –

관련 문제