Javascript 敲除绑定2个指向不同视图的链接并切换modelview

我是一个新手，想在页面上有两个链接和两个模型。我希望链接开关上的单击事件显示哪个视图模型。我试过几种方法，也有一把小提琴，但我无法使它发挥作用。你知道我可能做错了什么吗

<div id="content">

    <a id="button1" href="#" >View 1</a>&nbsp;
    <a id="button2" href="#" >View 2</a>&nbsp;
    <hr />

    <div data-bind="with: selectedView">
        <div data-bind="template: { name: templateName, data: data }"></div>
    </div>

    <script id="oneTmpl" type="text/html">
        <ul data-bind="foreach: items">
            <li>
                <span data-bind="text: id"></span>
                <input data-bind="value: name" />
            </li>
        </ul>
    </script>

    <script id="twoTmpl" type="text/html">
        First:
        <input data-bind="value: firstName" />
        Last:
        <input data-bind="value: lastName" />
    </script>
</div>

---

实际上，您的实现就快到了。你只需要做几个调整

• 从ViewModel中选择的视图是可观察的对象。一个可观察的物体基本上是一个函数。要修改该对象的值，需要将新值作为参数传递

  selectedView（valueisher）

• ViewModel中的视图是可观察的阵列对象。如上所述，由于可观察对象是一个函数，要获取特定索引的值，您需要像函数一样调用它，然后再调用其索引

  views（）[0]

下面是更新后的情况：

var View = function (title, templateName, data) {
  this.title = title;
  this.templateName = templateName;
  this.data = data;
};

var subModelA = {
  items: ko.observableArray([
    { id: 1, name: "one" },
    { id: 2, name: "two" },
    { id: 3, name: "three" }
  ])
};

var subModelB = {
  firstName: ko.observable("Bob"),
  lastName: ko.observable("Smith")
};


var ViewModel =  function (){
  this.views = ko.observableArray([
    new View("one", "oneTmpl", subModelA),
    new View("two", "twoTmpl", subModelB)
  ]);
  this.selectedView = ko.observable();
  this.select = function(id){
    if (id === 1) {
        this.selectedView(this.views()[0]);
    } else {
        this.selectedView(this.views()[1]);
    }
  };
};

ko.applyBindings(new ViewModel());

下面是对按钮的一些更改：

<a id="button1" href="#" data-bind="click: select(1)">View 1</a>&nbsp;
<a id="button2" href="#" data-bind="click: select(2)">View 2</a>&nbsp;

bootstrap听起来不错，但最终我想扩展它，并将视图放在不同的html文件中，了解如何在更大的视图集上使用knockout完成此操作，使用链接更改显示的视图，并使用knockout绑定设置模型数据。@KH1229我更改了解决方案：）

<a id="button1" href="#" data-bind="click: select(1)">View 1</a>&nbsp;
<a id="button2" href="#" data-bind="click: select(2)">View 2</a>&nbsp;