ノックアウト子供に観察可能な値を設定するには

Question

テンプレートを使用してインライン編集を実装しようとしています。私のビューモデルでは、私はメソッドを持っています：self.changeMode。私はボタンのクリックイベント（テンプレート内）からこれをトリガーしています。 changeMode関数に渡されるデータパラメータには期待されるデータがありますが、私はobservableを変更する必要があります。これはどうすればいいですか？

var MyViewModel = function (data) { 
 
    var self = this; 
 

 
    self.managingAgentId = ko.observable(data.managingAgentId); 
 
    self.companyName = ko.observable(data.companyName); 
 
    self.companyNumber = ko.observable(data.companyNumber); 
 
    self.isActive = ko.observable(data.isActive); 
 
    self.agents = ko.observableArray(data.agents); 
 
    
 
    // Change to Edit or Display mode 
 
    self.changeMode = function (data,event) { 
 
     event.preventDefault(); 
 
     // => need to change mode here! 
 
    }; 
 
} 
 

 

 
$(function() { 
 

 
     $.ajax({ 
 
      type: "GET", 
 
      url: ma.Urls.LoadManagingAgent 
 
     }).done(function (result) { 
 
      $.each(result.agents, function (index, element) { 
 
       element.mode = "display"; 
 
      }); 
 
      
 
      ko.applyBindings(new MyViewModel(result)); 
 
     }).error(function (response) { 
 
      addMessage(response); 
 
     }); 
 
    });

<script type="text/html" id="display"> 
 
    <td data-bind="text: managingAgentMemberId"></td> 
 
    <td data-bind="text: applicationUser.userName"></td> 
 
    <td data-bind="text: applicationUser.email"></td> 
 
    <td data-bind="text: applicationUser.emailConfirmed"></td> 
 
    <td data-bind="text: isActive"></td> 
 
    <td> 
 
     <button class="btn btn-success btn-sm" data-bind="click:$root.changeMode"> 
 
      <i class="fa fa-edit"></i> 
 
      Edit 
 
     </button> 
 
    </td> 
 
</script>

<script type="text/html" id="edit"> 
 
    <td data-bind="text: managingAgentMemberId"></td> 
 
    <td data-bind="text: applicationUser.userName"></td> 
 
    <td data-bind="text: applicationUser.email"></td> 
 
    <td data-bind="text: applicationUser.emailConfirmed"></td> 
 
    <td><input type="checkbox" data-bind="checked: isActive" /> </td> 
 
    <td> 
 
     <button class="btn btn-success btn-sm kout-update"> 
 
      <i class="fa fa-save"></i> 
 
      Update 
 
     </button> 
 
     <button class="btn btn-danger btn-sm kout-cancel"> 
 
      <i class="fa fa-stop"></i> 
 
      Cancel 
 
     </button> 
 
    </td> 
 
</script>

Answer 1

正規溶液：

function Child(data) { 
 
    var self = this; 
 
    self.name = ko.observable(); 
 
    self.mode = ko.observable('display'); 
 
    ko.mapping.fromJS(data, Child.mapping, self); 
 
} 
 
Child.prototype.toggleMode = function() { 
 
    this.mode(this.mode() === 'display' ? 'edit' : 'display'); 
 
}; 
 
Child.mapping = { 
 
    // mapping rules, if applicable 
 
}; 
 
function Parent(data) { 
 
    var self = this; 
 
    self.children = ko.observableArray(); 
 
    ko.mapping.fromJS(data, Parent.mapping, self); 
 
} 
 
Parent.mapping = { 
 
    children: { 
 
     create: function (options) { 
 
      return new Child(options.data); 
 
     } 
 
    } 
 
}; 
 

 
ko.applyBindings(new Parent({ 
 
    children: [ 
 
     {name: 'Child 1'}, {name: 'Child 2'}, {name: 'Child 3'} 
 
    ] 
 
}));

td:first-child { 
 
    width: 200px; 
 
} 
 
button { 
 
    width: 6em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 

 
<table> 
 
    <tbody data-bind="foreach: children"> 
 
     <tr data-bind="template: mode"></tr> 
 
    </tbody> 
 
</table> 
 

 
<script type="text/html" id="display"> 
 
    <td data-bind="text: name"></td> 
 
    <td> 
 
     <button data-bind="click: toggleMode">Edit</button> 
 
    </td> 
 
</script> 
 

 
<script type="text/html" id="edit"> 
 
    <td><input data-bind="value: name"></td> 
 
    <td> 
 
     <button data-bind="click: toggleMode">Save</button> 
 
    </td> 
 
</script>