使用敲除按名称获取元素

Question

我正在创建如下输入元素：

<input type="text" class="form-control" data-bind="value: attr: { name: Data[' + $index() + ']'}" />

我有另一个按钮，它通过点击创建多个上面的输入。

我的主按钮也点击为：

 <input type="button" value="Check Data" class="btn btn-primary" data-bind='click: verify.bind($data, event)' />

在我的淘汰赛中，我有：

self.verify= function (data, event) {
  //here I want the data that is entered in each of the inputs.      
}

在上面的按钮上单击我想获取所有输入的值。在 JS 中，我可以按名称完成元素，它会给我那个元素。但是我怎样才能让它在这里工作。

更新代码：

我的 HTML 中有这个：

    <div data-bind="foreach: { data: myData }">
        <div class="form">
            <div class="myClass">
                <input type="text" class="form-control" data-bind="value: $data.textbox, attr: { name: 'MyData[' + $index() + '].Textbox'}" />
            </div>    
            <div class="myClass">                    
                <input type="button" value="Add More" class="btn btn-primary" data-bind="click: $parent.add"/>
            </div>              
        </div>
    </div>

当用户单击“添加更多”时，它会添加更多内容并添加一个文本框。 然后最后我有一个按钮：

<div class="form">      
    <input type="button" value="Check Data" class="btn btn-primary" data-bind='click: checkData' />     
</div>

当用户单击检查数据按钮时，我只需要对文本框中输入的所有数据进行一些验证。验证需要在客户端完成。

在我的淘汰赛中，我有：

 this.add = ko.observableArray();

 this.add = function () {
        self.myData.push(
            {
                textbox: ""
            });
    };

 this.checkData = function (){  
   //Here I want to get whats entered in all the textboxes

 }

Answer 1

很有可能你的整个方法都是错误的。

• 您的 HTML 输入元素不需要名称。
• 您的视图模型方法不需要知道任何关于显示其值的 HTML 元素的信息。
• 您无需使用特殊参数绑定事件处理程序。

视图（HTML 页面）用作修改视图模型的工具。验证所需的所有数据都在 viewmodel 中，因为您已将用户可以更改的所有内容设置为 observable。

function Test() {
  var self = this;
    
  self.users  = ko.observableArray([
    { name: ko.observable("John Doe") },
    { name: ko.observable("Jane Doe") }
  ]);
  
  self.verify = function () {
    var usernames = self.users().map(function (u) { return ko.unwrap(u.name) });
    
    alert('You have entered these users\n\n' + usernames.join('\n'));
  };
}

var vm = new Test();
ko.applyBindings(vm);

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

<div data-bind="foreach: users">
  <input type="text" class="form-control" data-bind="value: name" /><br>
</div>

<button class="btn btn-primary" data-bind='click: verify'>Check Data</button>