knockoutjs를 사용하여 선택한 항목 편집

Question

knockoutjs로 테이블을 만들고 있습니다. 테이블에 데이터를 삽입하는 간단한 양식이 있습니다. 양식이 테이블 바깥에 있습니다.

3 가지 작업 중 2 가지 작업을 수행했습니다. 그러나 &을 삽입하면 선택 항목이 작동하고 선택 항목이 양식에 채워지는 것처럼 보일 수 없습니다.

나는 아주 기본적인 예 jsfiddle

내 뷰 모델의 짧은 부분 내에서 생성이 나는 editItem를 (호출 할 때 텍스트 상자가 값으로 채워집니다) 그래서 어떻게해야합니까 무엇

var viewModel = function (items) { 
    var self = this; 
    self.selectedItem = ko.observable(null); 
    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) { 
     return new ItemModel(item.itemAmount); 
    })); 
    self.inputItem = new ItemModel(); 
    self.addItem = function() { 

     self.items.push(new ItemModel(self.inputItem.itemAmount())); 
     console.log(ko.toJSON(self.items)); 
     self.inputItem.itemAmount(""); 
    }; 

    self.removeItem = function (item) { 
     self.items.remove(item); 
    }.bind(this); 

    self.editItem = function (item) { 
     self.selectedItem(item); 

    }.bind(this); 


    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) { 
     return new ItemModel(item.itemAmount); 
    })); 

}; 

테이블에서?

나는이 기본적인 것들입니다 확신하지만 난 많은 시간이 나 자신 당신이 요구하는지에 가까운 무언가를 보여줍니다

Answer 1

Here's a Fiddle를 정렬하는 노력에서 빙빙 돌고에 보냈다 생각합니다. 이것이 최고의 UX 디자인이라고 확신하지는 못하지만 업데이트를 처리 할 수있는 방법을 보여 주어야합니다.

보기에는 selectedItem이 채워질 때 표시 할 수있는 편집 템플리트가 있습니다.

<!-- ko ifnot: selectedItem --> 
    <input type="number" class="span1" min="1" data-bind="value: inputItem.itemAmount" /> 
    <button class="btn" data-bind="click: addItem">Add</button> 
<!-- /ko --> 
<!-- ko if: selectedItem --> 
    <input type="number" class="span1" min="1" data-bind="value: newItemAmount" /> 
    <button class="btn" data-bind="click: updateItem">Update</button> 
    <button class="btn" data-bind="click: cancelUpdate">Cancel</button> 
<!-- /ko --> 

뷰 모델은

self.newItemAmount = ko.observable(); 
    self.updateItem = function(){ 
     selectedItem().itemAmount(newItemAmount()); 
     selectedItem(null); 
    };