将项目添加到表单值为

Question

的值的子项集合在最近几天我阅读了大量文章，快速入门和教程，但是当向可观察数组添加项目时，它们或多或少都会将空项目，并让用户在创建后填写剩下的内容，但是我想反过来。

下面的淘汰赛出价工作，直到下拉列表填充和按钮被禁用如果textarea是空的，但这是我到目前为止。

我的观点的模型和数据我用的是在这里找到：Child collection mapping not firing 我不知道我是否应该在单独的线程他们在这里复制，或让他们的可读性

我想才达到是增加一个新的可观察的项目从我的收藏“文本”与下拉列表中的语言和点击按钮时从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> 

Answer 1

我已将您的意见纳入考虑并产生了这个小提琴。我希望它有帮助。

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

然后，当您单击Add Item时，它会将一个新项目添加到可观察阵列（基于这两件事情）。

淘汰赛为我做了所有的魔术，我所做的一切都是设置了一些绑定。

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