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/ 나는 그것의 입력 필드를 편집하여 업데이트 할 때 업데이트 할 그 값을 얻기 위해 작성해야하는 일?
감사합니다 ..
와우 감사합니다 !! 그건 트릭을 .. 다시 한번 감사드립니다. –
답변은 정확하지만 실제로 코드에 적용하는 방법을 이해할 수 없습니다. 다음은 솔루션을 가져온 이유입니다. http://code.tutsplus.com/tutorials/knockout-observables--net-31293 –