如何将选定的可观察对象附加到新添加的项目？

Question

我是淘汰赛的新手。 我已经有了这个小提琴 ，它将：

1. 将左框填充为项目列表
2. 在左侧框中选择一个项目后，它将在右侧框中显示详细的项目

看来我可以正常运行了。 但我想添加更多。

1. 加载后，选择第一个foo及其显示的详细信息
2. 单击+ Add foo链接后，它将添加新的foo并将其突出显示，然后将出现在右侧框中的编辑器，然后在我单击save时将其添加到foo的集合中。

这有可能吗？

下面的代码段

 var data = [ { id: 1, name: "foo1", is_active: true }, { id: 2, name: "foo2", is_active: true }, { id: 3, name: "foo3", is_active: true }, { id: 4, name: "foo4", is_active: false }, ]; var FooBar = function (selected) { this.id = ko.observable(""); this.name = ko.observable(""); this.is_active = ko.observable(true); this.status_text = ko.computed(function () { return this.is_active() === true ? "Active" : "Inactive"; }, this); this.is_selected = ko.computed(function () { return selected() === this; }, this); }; var vm = (function () { var foo_bars = ko.observableArray([]), selected_foo = ko.observable(), load = function () { for (var i = 0; i < data.length; i++) { foo_bars.push(new FooBar(selected_foo) .name(data[i].name) .is_active(data[i].is_active) .id(data[i].id)); } }, select_foo = function (item) { selected_foo(item); }, add_foo = function () { // I have tried this but ain't working at all. Please help // foo_bars.push(new FooBar(selected_foo)); }; return { foo_bars: foo_bars, load: load, selected_foo: selected_foo, select_foo: select_foo, add_foo: add_foo }; }()); vm.load(); ko.applyBindings(vm); 

 .box { float: left; width: 250px; height: 250px; border: 1px solid #ccc; } .selected { background-color: #ffa !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="box"> <a href="#" data-bind="click: add_foo">+ Add foo</a> <table> <thead> <tr> <th>Name</th> <th>Status</th> </tr> </thead> <tbody data-bind="foreach: foo_bars"> <tr data-bind="click: $root.select_foo, css: { selected: is_selected }"> <td><a href="#" data-bind="text: $data.name"></a></td> <td data-bind="text: $data.status_text"></td> </tr> </tbody> </table> </div> <div class="box" data-bind="with: selected_foo"> Id: <span data-bind="text: id"></span><br /> Name: <input type="text" data-bind="value: name" /><br /> Status: <input type="checkbox" data-bind="checked: is_active"> <span data-bind="text: status_text"></span><br /> <button>Save</button> </div> 

Answer 1

您要添加的新对象没有分配名称和ID，这可能就是为什么它没有显示出来的原因。 除此之外，添加新对象后，您需要先选择它，然后它才能显示为左侧面板中的所选对象。 以下是我对您的add方法的代码定义

add_foo = function() {
    var new_foo=new FooBar(selected_foo)
        .name("foo"+(foo_bars().length+1));
    select_foo(new_foo);
    foo_bars.push(new_foo);
};

完整的工作提琴可以在这里找到http://jsfiddle.net/euq48em4/1/

Answer 2

演示： http : //jsfiddle.net/wguhqn86/4/

load = function () {
    for(var i = 0; i < data.length; i++){
        foo_bars.push(new FooBar(selected_foo)
              .name(data[i].name)
              .is_active(data[i].is_active)
              .id(data[i].id)
        );
    }
    selected_foo(foo_bars()[0]); // default select first foo
},


add_foo = function() {
    var count = foo_bars().length + 1;
    var newItem = new FooBar(selected_foo).name('')
                .is_active(true)
                .id(count)
    foo_bars.push(newItem);
    selected_foo(newItem);
};