Knockout 将 2 个链接绑定到不同的视图并切换模型视图

Posted 2023-02-26

【中文标题】Knockout 将 2 个链接绑定到不同的视图并切换模型视图

【英文标题】：Knockout bind 2 links to different views and swich modelview

【发布时间】：2017-03-17 00:30:01

【问题描述】：

我是淘汰赛新手，希望在页面上有 2 个链接和 2 个模型。我想要链接上的点击事件切换显示哪个视图模型。我已经尝试了几种方法并且有一个 jfiddle https://jsfiddle.net/edgrttj3/7/ 但我无法让它工作。知道我可能做错了什么吗？

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

这里是javascript：

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 = 
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
    ]),
    selectedView: ko.observable()
;

function setSelectedView(newview) 
    alert(newview);
    if (newview == "oneTmpl") 
        viewModel.selectedView = viewModel.views[0];
     else 
        viewModel.selectedView = viewModel.views[1];
    
;
ko.applyBindings(viewModel);
        document.getElementById ("button1").addEventListener("click", setSelectedView('oneTmpl'), false);
        document.getElementById ("button1").addEventListener("click", setSelectedView('twoTmpl'), false);

【参考方案1】：

实际上，您的实现几乎就在那里。您只需要做一些调整。

ViewModel 中的selectedView 是一个可观察对象。可观察对象基本上是一个函数。为了修改该对象的值，您需要将新值作为参数 selectedView(valueIsHere) 传递。 来自 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 文件中，并了解如何通过在更大的视图集上剔除来完成此操作，并使用链接和更改显示的视图使用敲除绑定设置模型数据。

@KH1229 我改变了解决方案:)