нокаут данные привязки при сохранении

Question

Я использую нокаут для изменения ui. У меня есть возможность удалить текст с экрана, нажав кнопку закрытия «x» на каждом из них.

Когда я нажимаю save, я хочу, чтобы весь оставшийся текст оставался на экране без кнопки закрытия и без поля ввода вокруг текста. Как я могу добиться этого с нокаутом. Мой код ниже

var data = { Name: "Test", 
 
    Items: ["sample1", "sample2", "sample3","DESIGN"]  
 
}; 
 

 
function ViewModel(data) { 
 
    var self = this; 
 
    self.Name = ko.observable(data.Name); 
 
    self.Items = ko.observableArray(ko.utils.arrayMap(data.Items, function(item) { 
 
     return { value: ko.observable(item) }; 
 
    })); 
 
            
 
    self.addItem = function() { self.Items.push({ value: ko.observable("") }); }; 
 
    self.removeItem = function(data) { 
 
     self.Items.remove(data); 
 
    }; 
 
    
 
    self.SaveItem = function() { self.Items.push({ value: ko.observable("") }); }; 
 
    self.SaveItem = function(data) { 
 
     self.Items.save(data); 
 
    }; 
 
} 
 
$(document).ready(function() {ko.applyBindings(new ViewModel(data)); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> 
 
<div> 
 
    Name: <span data-bind="text: Name"></span> 
 
</div> 
 
<div> 
 
    Items: <button data-bind="click: addItem">Add Item</button> 
 
</div> 
 
<div> 
 
    <table> 
 
     <tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"></tbody> 
 
    </table> 
 
</div> 
 
    <button data-bind="click: SaveItem">SAVE</button> 
 
<script type="text/html" id="itemTemplate"> 
 
    <tr> 
 
     <td> 
 
      <input data-bind="value: value" /> 
 
      <a href="#" data-bind="click: $parent.removeItem">X</a> 
 
     </td> 
 
    </tr> 
 
</script>

Answer 1

Вы должны установить наблюдаемый сказать мнению, когда элементы были сохранены, а затем заменить входной и «X» с различными размечать.

var data = { Name: "Test", 
 
    Items: ["sample1", "sample2", "sample3","DESIGN"]  
 
}; 
 

 
function ViewModel(data) { 
 
    var self = this; 
 
    self.saved = ko.observable(false); 
 
    self.Name = ko.observable(data.Name); 
 
    self.Items = ko.observableArray(ko.utils.arrayMap(data.Items, function(item) { 
 
     return { value: ko.observable(item) }; 
 
    })); 
 
            
 
    self.addItem = function() { self.Items.push({ value: ko.observable("") }); }; 
 
    self.removeItem = function(data) { 
 
     self.Items.remove(data); 
 
    }; 
 
    
 
    self.SaveItem = function() { self.Items.push({ value: ko.observable("") }); }; 
 
    self.SaveItem = function(data) { 
 
     //self.Items.save(data); I have no idea what you are doing here 
 
     self.saved(true); 
 
    }; 
 
} 
 
$(document).ready(function() {ko.applyBindings(new ViewModel(data)); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> 
 
<div> 
 
    Name: <span data-bind="text: Name"></span> 
 
</div> 
 
<div> 
 
    Items: <button data-bind="click: addItem">Add Item</button> 
 
</div> 
 
<div> 
 
    <table> 
 
     <tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"></tbody> 
 
    </table> 
 
</div> 
 
    <button data-bind="click: SaveItem">SAVE</button> 
 
<script type="text/html" id="itemTemplate"> 
 
    <tr> 
 
     <td data-bind="visible: !$parent.saved()"> 
 
      <input data-bind="value: value" /> 
 
      <a href="#" data-bind="click: $parent.removeItem">X</a> 
 
     </td> 
 
     <td data-bind="visible: $parent.saved()"> 
 
      <span data-bind="text: value"></span> 
 
     </td> 
 
    </tr> 
 
</script>