javascript - 更新 knockout 可观察值

Question

我在更新 knockout 可观察值时遇到了一些问题。我需要将 linkClick 中的值传递到 showMenu 中。

当我像这样手动更新showMenu(“Value”)时，值将很好地传递到 View 。然而，它必须是一个动态值。这本质上就是我的代码。

//View
<a data-bind="click: linkClick" data-sec="Value">Click Me</a>

<!-- ko if: showMenu() === 'Value' -->
    <ul class="Menu">
        <li>Link 1</li>
        <li>Link 2</li>
    </ul>
<!-- /ko -->

define(
  [''],
  function () {
    var _this = this;
    return {

        showMenu: ko.observable(""),
        linkClick: function(data, event) {

            var element = event.target,                    
                Menu = $(element).attr('data-sec');

            var myMenu = this.showMenu();
            this.showMenu(Menu);

        }
    }
});

我还尝试在全局范围内使用_th​​is而不是this，但这会产生_this.showMenu()不是函数错误。请帮忙。

PS。我必须在第一个函数定义中编写所有内容。

Answer 1

使用data(这是你的 View 模型)而不是this

function vm() {
  return {
    showMenu: ko.observable(""),
    linkClick: function(data, event) {
      var element = event.target,
        Menu = $(element).attr('data-sec');

      // use data instead of this
      data.showMenu(Menu);
    }
  }
}

ko.applyBindings(vm());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<a data-bind="click: linkClick" data-sec="Value">Click Me</a> 
<!-- ko if: showMenu() === 'Value' -->
<ul class="Menu">
  <li>Link 1</li>
  <li>Link 2</li>
</ul>
<!-- /ko -->