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

我是淘汰赛的新手。我已经有了这把小提琴：

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>