（Fiddle）

Question

我已经阅读了过去几天的很多文章，快速入门和教程，但或多或少所有这些，当将项目添加到可观察数组时推送一个空项目，然后让用户在创建后填写其余部分，但我想反过来。

如果填充了下拉列表，则下面的淘汰赛出价正在工作，如果textarea为空，则按钮被禁用，但这就是我到目前为止所做的一切。

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

我希望获得的是在我的收藏中添加一个新的可观察项目＆＃34;文本＆＃34;使用下拉列表中的语言和单击按钮时来自textarea的文本。

以下部分是绑定到＆＃34; selectedItem＆＃34;的引导模式内容的一小部分。我的根视图模型上的集合。

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

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

1 个答案:

（Fiddle）

的js

HTML