使用表单中的值将项目添加到子集合

Question

过去几天我已经阅读了很多文章、快速入门和教程，但或多或​​少是全部在创建之后，但我想反其道而行之。

只要下拉列表被填充，并且如果 textarea 为空，按钮将被禁用，那么下面的淘汰竞标就可以正常工作，但这就是我到目前为止所拥有的全部。

我使用的视图模型和数据可以在这里找到：Child collection mapping not firing 我不知道我是否应该将它们复制到这里，或者将它们保留在单独的线程中以便于阅读

我希望实现的是在我的集合“文本”中添加一个新的可观察项目，并在单击按钮时使用下拉列表中的语言和文本区域中的文本。

下面的这部分是绑定到我的根视图模型上集合的“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>

Answer 1

我考虑了您的评论并制作了这个小提琴。希望对你有帮助。

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

然后当您单击Add Item 时，它会向可观察数组添加一个新项目（基于这两件事）。

Knockout 为我做了所有的魔法，而我所做的只是设置了一些绑定。

(Fiddle)

Js

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);

HTML

<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>