javascript - 使用挖空在按钮后添加更多输入字段

Question

所以我已经显示了两个输入字段，用户可以在其中输入信息。我还有另一个按钮“添加”，允许用户添加另一组两个输入字段来输入数据。

这是我当前的 View ，但我需要将添加输入字段的功能添加到我的 viewModel 中，以便在用户单击时可用。

jsFiddle of html

我想添加点击添加按钮的功能，比如:

self.addName = function(){//return new input fields to user}

在我的 html 中我会有 <a href="#" onclick="addName()">

Answer 1

问题是，您需要在数组中包含可观察对象以绑定(bind)到多个输入。 你这样做:

<div class="addNames">
    <!-- ko foreach: ViewModel.values -->
    <div class="fname" >
        <input data-bind="value: $data.value" placeholder="Add your fname..." contenteditable/>
    </div>
    <!-- /ko -->
</div>
<div class="addBtn">
    <a data-bind="click: ViewModel.addValue"> Add Name</a>
</div>

和 JS:

 ViewModel = {
        values: ko.observableArray([
            {value: ko.observable('initial value')}
        ]),
        addValue: function(){
            ViewModel.values.push({ value: ko.observable('')});
            ViewModel.values().forEach(function(data){
                console.log(data.value());
            });
        }
    }

    ko.applyBindings(); 

https://jsfiddle.net/x5wu7gsy/