Knockout.js 使用表单中的值将项添加到子集合

在过去几天里，我读了很多文章、快速入门和教程，但或多或少都是这样，当将一个项目添加到可观察数组时，会推送一个空项目，并让用户在创建后填写其余的内容，但我想换一种方式

在下拉列表中填充了下面的淘汰出价，如果textarea为空，按钮将被禁用，但这是我目前为止得到的全部

我使用的视图模型和数据可在此处找到： 我不知道我是应该把它们复制到这里，还是把它们放在单独的线程中以便于阅读

我希望实现的是，单击按钮时，使用下拉列表中的语言和文本区域中的文本向我的收藏文本添加一个新的可观察项

下面这部分是绑定到我的根视图模型集合的selectedItem的引导模式内容的一小部分

    <div class="modal fade" data-backdrop="static" data-bind="showModal:selectedItem, with:selectedItem">
    <!-- Here is code for enumerating from collection "Texts", but i removed it for readability, and put focus on the "Add part" below  -->
                <div class="form-group">
                    <label class="col-md-3 control-label col-md-offset-2">Language</label>
                    <div class="col-md-6">
                        <select data-bind="options: $root.AvailableLanguages, optionsText:'Name', optionsValue:'Id'" class="form-control"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label col-md-offset-2">Translation</label>
                    <div class="col-md-6">
                        <textarea class="form-control" data-bind='value: $root.itemToAdd, valueUpdate: "afterkeydown"'></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label col-md-offset-2"><button class="btn btn-primary btn-sm" data-bind="click: addItem, enable: $root.itemToAdd().length > 0">Add</button></label>
                </div>
     </div>

---

我考虑了你的意见，制作了这把小提琴。我希望有帮助

请注意，模型如何跟踪您关心的两个项目：下拉列表和文本框

然后，当您单击Add item时，它会基于这两个内容向observable数组添加一个新项

淘汰赛为我带来了所有的魔力，我所做的只是设置了一些绑定

Js Html

---

您能否创建一个JSFIDLE来演示您无法实现的功能我从来没有使用过JSFIDLE，所以我不知道要添加什么，但这基本上就是我今天所拥有的。如果我将addValues绑定到表单标签上提交，则不会触发，页面会被发布，但如果我将其绑定到单击按钮，则会触发，但是如果我使用alertko.ToJSoneElement进行调试，则会在selectedItem中获取模型，而不是从我的表单中获取。抱歉，我仍然无法确定您正在尝试执行的操作。在最简单的层面上，你想要实现什么？去掉任何无关紧要的东西，告诉我确切的问题。听起来您只是想单击一个按钮并将一个新项目添加到一个集合中，该集合有两个值，一个来自下拉列表，另一个来自文本框，是否正确？是否正确。我的描述很模糊。我想单击一个按钮，从下拉列表和文本区域中获取值，并将其插入到子集合中。谢谢！这是我寻找的一个很好的开始。我甚至将它与数据绑定结合起来，以便能够进行编辑和添加。现在我更好地掌握了我应该如何围绕Knckkout思考！

var viewModel = function () {
    var self = this;

    self.CurrentDropDownItem = ko.observable("");
    self.CurrentTextBoxItem = ko.observable("4imble");

    self.Greetings = ko.observableArray([new GreetingItem("Hello", "RandomPerson")]);

    self.SaveNewGreeting = function(){
            self.Greetings.push(new GreetingItem(self.CurrentDropDownItem(), self.CurrentTextBoxItem()));
    }

    return {
        CurrentDropDownItem: CurrentDropDownItem,
        CurrentTextBoxItem: CurrentTextBoxItem,
        Greetings: Greetings,
        SaveNewGreeting: SaveNewGreeting
    }
}

function GreetingItem(greeting, name){
    var self = this;
    self.greeting = greeting;
    self.name = name;    
}

ko.applyBindings(viewModel);

<div>
    <select data-bind="value: CurrentDropDownItem">
        <option>Hello</option>
        <option>Goodbye</option>
        <option>How you doing?</option>
    </select>    

    <input type="text" data-bind="value: CurrentTextBoxItem, valueUpdate: 'afterkeydown'"></input>
    <button data-bind="click: SaveNewGreeting">Add Item</button>
</div>

<div>

<h3>Dynamically Generated List</h3>
    This is the list of items added so far (1st added at run time):
    <div data-bind="foreach: Greetings">
        <b data-bind="text: greeting"></b>, 
        <b data-bind="text: name"></b><br />
    </div>

<h3>Debug Status Messages</h3>
    This is the value currently bound to drop down: 
        <b data-bind="text: CurrentDropDownItem"></b><br />
    This is the value currently bound to the text box: 
        <b data-bind="text: CurrentTextBoxItem, valueUpdate: 'afterkeydown'"></b>
</div>