用一个可观察数组剔除多个动态文本框

Question

我正在尝试使用淘汰赛 JS 将文本框中的数据保存到 localStorage！但是我是新手，无法弄清楚这种特殊情况。该字段具有相同的可观察名称！请在下面找到我的代码。

HTML 代码：

<form data-bind="foreach: trialData">
    <input type="text" name="name" data-bind="textInput: myData"><br>
</form>

JS代码：

var dataModel = {
    myData: ko.observable('new'),

    dataTemplate: function (myData) {
        var self = this;
        self.myData = ko.observable(myData);
    }
};

dataModel.collectedNotes = function () {
    var self = this;
    self.trialData = ko.observableArray([]);
    for (var i=0; i<5; i++) {
        self.trialData.push (new dataModel.dataTemplate());
    }
};
dataModel.collectedNotes();
ko.applyBindings(dataModel);

Trace：在文本框中输入的数据应该在 localStorage 中可用。

Answer 1

你需要定义一个Handler函数从Textboxes中读取数据并保存到localstorage.你需要引用绑定到click事件的Data，可以使用第一个参数。 Knockout 将数据和事件信息作为 2 个参数传递给 click 处理函数。因此，您可以使用单击绑定将事件处理程序添加到您的 viewModel，然后 unwrap 值并将其保存到 localStorage。

saveToLocalStorage : function(data){
         var datatoStore = JSON.stringify(data.trialData().map(x=>x.myData()));
         console.log(datatoStore);
         localStorage.setItem("TextBoxValue", datatoStore);

    }

完整代码：请注意，由于这是一个沙盒环境（在 StackOverflow 上运行此 js 片段），localStorage 不起作用，但它应该可以在您的代码中使用。我在控制台中添加了一行来获取 Store 的值。

var dataModel = {
    myData: ko.observable('new'),

    dataTemplate: function (myData) {
        var self = this;
        self.myData = ko.observable(myData);
    },
    
    saveToLocalStorage : function(data){
         var datatoStore = JSON.stringify(data.trialData().map(x=>x.myData()));
         console.log(datatoStore);
         localStorage.setItem("TextBoxValue", datatoStore);
         
    }
};

dataModel.collectedNotes = function () {
    var self = this;
    self.trialData = ko.observableArray([]);
    for (var i=0; i<5; i++) {
        self.trialData.push (new dataModel.dataTemplate());
    }
};
dataModel.collectedNotes();
ko.applyBindings(dataModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="foreach: trialData">
    <input type="text" name="name" data-bind="textInput: myData"><br>
</form>
<button data-bind="click:saveToLocalStorage">Save To local storage</button>