Question

我有类似的东西

<script id="template1" type="text/html">
<h3>Template 1</h3>
<button id="templButton" data-bind="click: swap">Go to template 2</button>
</script>

<script id="template2" type="text/html">
<h3>Template 2</h3>
<button id="templButton" data-bind="click: swap">Go to template 2</button>
</script>

<div data-bind="template: theTemplate"></div>

<script>
ko.applyBindings({
    theTemplate: ko.observable("template1"),
    swap: function () {
        this.theTemplate("template2");
    }
});
</script>

但它只更改了一次模板，仅从tempalate1更改为template2。如何切换到两个模板。

它应该像

ko.applyBindings({
        theTemplate: ko.observable("template1"),
        swap: function () {
            if (this.theTemplate==template1)
            {
                this.theTemplate("template2");
            }
            else
            {
                this.theTemplate("template1");
            }
        }
    });

但是this.theTemplate("template2")在当前上下文中做什么操作()是什么？如何检查状态为theTemplate？

Answer 1

你只是错过了几件事：

要获取可观察的值，请调用它
observable的值是一个字符串，所以引用它

所以：

    if (this.theTemplate() == 'template1') {

ko.applyBindings({
  theTemplate: ko.observable("template1"),
  swap: function() {
    if (this.theTemplate() == 'template1') {
      this.theTemplate("template2");
    } else {
      this.theTemplate("template1");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script id="template1" type="text/html">
  <h3>Template 1</h3>
  <button id="templButton" data-bind="click: swap">Go to template 2</button>
</script>

<script id="template2" type="text/html">
  <h3>Template 2</h3>
  <button id="templButton" data-bind="click: swap">Go to template 2</button>
</script>

<div data-bind="template: theTemplate"></div>

更改模板动态

1 个答案: