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>

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

在我的淘汰赛中，我有：

 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输入元素不需要名称。
您的viewmodel方法无需了解显示其值的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>

使用knockout按名称获取元素

1 个答案: