javascript - 使用 knockout 按名称获取元素

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)' />

在我的 knockout 中，我有:

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>

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

在我的 knockout 中，我有:

 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 输入元素不需要名称。
• 您的 View 模型方法不需要了解有关显示其值的 HTML 元素的任何信息。
• 您无需使用特殊参数绑定(bind)事件处理程序。

View (HTML 页面)用作修改 View 模型的工具。假设您已经将用户可以更改的所有内容都设置为可观察的内容，那么您验证所需的所有数据都位于 View 模型中。

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>