更新淘汰赛 observable答案

【问题标题】：Updating a knockout observable更新淘汰赛 observable
【发布时间】：2017-02-11 01:22:34
【问题描述】：

我在更新淘汰赛可观察值时遇到了一些问题。我需要将值从 linkClick 传递到 showMenu。

当我像这样 showMenu("Value") 手动更新 showMenu 时，Value 将很好地传递给视图。但是，它必须是动态值。这基本上是我的代码。

//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);

        }
    }
});

我也尝试在全局范围内使用 _this 而不是 this 但这会产生 _this.showMenu() is not a function 错误。请帮忙。

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

【问题讨论】：

showMenu(?) 的值应该从哪里来？
this in var _this = this; 没有指向任何东西（它实际上指向我猜的窗口对象）。如果你写var _this = { _here_the_litteral_definition_of_some_object_with_methods_ }，_this.showMenu() 有效。此外，如果您要定义一个包，通常建议使用“exports”而不是 _this 作为您要定义的模块的变量名。

标签： javascript knockout.js

【解决方案1】：

使用data（这是您的视图模型）而不是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 -->

【讨论】：