將項目添加到表單值爲

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>