knockoutjs foreach内でクリックしたオブジェクトを選択

Question

私はデータをリストするためにforeach関数を使用しています。各行には、クリックイベントに応答する編集ボタンが含まれています。しかし、それをクリックすると、リスト内のすべてのボタンが変化しています。私は各ボタンを各項目を選択して、独立して動作させたいと思う。 このフィドルにfiddleDEMO

var ViewModel = function() { 
    var self = this; 
this.selectedIndex = ko.observable(0); 
this.onIndexSelected = function (index) { 
    this.selectedIndex(index); 
}; 
self.buttonState = ko.observable(); 
self.editar = ko.observable('Edit'); 
self.changeState = function(state){ 
    console.log('changed value'); 
    console.log(state) 
    self.buttonState(state); 
} 

self.changeButtonValue = function(){ 
     if (self.buttonState() == false) { 
     console.log('entro al if'); 
     self.changeState(true); 
     self.editar('Edit'); 
    } else { 
     console.log('else'); 
     self.changeState(false); 
     self.editar('Save'); 
    } 
} 

this.items = [ 
    {id:1, name: 'Northwoods Prestige'}, 
    {id:2, name: 'Forest Bay'}, 
    {id:3, name: 'Timberland'} 
]; 
}; 
var viewModel = new ViewModel(); 
ko.applyBindings(viewModel); 

感謝をチェックしてください！

Answer 1

各項目が独立して動作するようにモデルを変更する必要があるため、サブモデルを作成し、データの各オブジェクトに新しいモデルを作成する必要があります。

例：https://jsfiddle.net/g6t79e4k/11/

HTML：

<div>Places</div> 
<br> 
<div class="row"> 
    <div data-bind="foreach: items"> 
    <div class="col-xs-2" data-bind="css: { selected: selectedIndex}, text: name, click: $root.onIndexSelected"> 
    </div> 
    <button data-bind="text: btnText, click: $root.changeButtonValue"></button> 
    <button data-bind="visible:btnState, click: $root.cancelBtn" >Cancel</button>  

    </div> 
</div> 

JS：

data = [ 
     {id:1, name: 'Northwoods Prestige'}, 
     {id:2, name: 'Forest Bay'}, 
     {id:3, name: 'Timberland'} 
    ]; 

var ViewModel = function() { 
    var self = this; 
    // map your data and create a new instance of itemViewModel 
    self.items = ko.observableArray($.map(data, function (item) { 
     return new itemViewModel(item); 
    })); 

    self.onIndexSelected = function (item) { 
     ko.utils.arrayForEach(self.items(), function (item) { 
      item.selectedIndex(false); 
     }); 
     item.selectedIndex(true); 
    }; 
    self.changeButtonValue = function(item){ 
     if (item.btnState()) { 
      item.btnText('Edit'); 
      item.btnState(false); 
     } else { 
      item.btnText('Save'); 
      item.btnState(true); 
     } 
    } 
    self.cancelBtn = function(item){ 
     item.btnText('Edit'); 
     item.btnState(false); 
    } 
}; 
// sub Model for each item 
var itemViewModel = function (data){ 
    var self = this; 
    self.id = ko.observable(data.id); 
    self.name = ko.observable(data.name); 
    self.selectedIndex = ko.observable(data.id == 1); 
    self.btnText = ko.observable("Edit"); 
    self.btnState = ko.observable(false); 
} 
var viewModel = new ViewModel(); 
ko.applyBindings(viewModel);