javascript - Knockout 将 2 个链接绑定(bind)到不同的 View 并切换模型 View

标签 javascript jquery knockout.js view

我是 Knockout 的新手,希望在包含 2 个模型的页面上有 2 个链接。我想要显示 View 模型的链接开关上的单击事件。我尝试了几种方法并得到了一个 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);

最佳答案

实际上,您的实现就快完成了。您只需要做一些调整。

  • ViewModel 中的 selectedView 是一个可观察对象。可观察对象基本上是一个函数。为了修改该对象的值,您需要将新值作为参数传递 selectedView(valueIsHere)
  • 来自 ViewModel 的 View 是一个可观察的数组对象。和上面一样,因为一个可观察对象是一个函数来获取特定索引的值,你需要像函数一样调用它,首先是它的索引 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;

关于javascript - Knockout 将 2 个链接绑定(bind)到不同的 View 并切换模型 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42847166/

相关文章:

jquery - 为什么 uploadify(jQuery 插件)不工作?我的代码有什么问题吗?

javascript - 嵌套匿名函数中的 CoffeeScript 类属性

asp.net-mvc - 使用 asp.net mvc 3 和 knockoutjs 发布 viewModel 并上传文件

javascript - Google 将 API 在 map 上放置多个标记并缩放到大多数标记所在的位置

javascript - 为什么 console.log 在 promise 循环后工作

javascript - 发布在 Ajax 中无法将输入保存到数据库

javascript - 从可观察数组中获取对象

performance - Knockoutjs 在 Internet Explorer 中运行速度极慢

javascript - sap.m.Input sap ui5 中的自定义输入类型

javascript - 解释 >= 和 <= 运算符在以下情况下的行为