使用 Knockout 仅在特定页面上显示按钮

Question

我有一个通用的 Header.html 和 Header.js 用于我的所有页面，现在我的一些按钮根据用户级别显示，这一切都很好，但我遇到的问题是我只想在一个特定页面上显示这个按钮，它不应该显示在其他任何地方，这是我的代码：

    <div class="pull-right" data-bind="tooltip: { title: DashboardEdit, placement: 'top' }">
    <button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText">
        <figure>
            <img src="../../../Images/NotesPink.png" />
            <figcaption data-bind="text: $data.ProcurementbuttonText() ? 'Save': 'Edit'"></figcaption>
        </figure>
    </button>
</div>

            self.ProcurementbuttonText = ko.observable(false);

        self.changeButtonText = function(){
         self.ProcurementbuttonText(!self.ProcurementbuttonText())

        }

现在我只想在我的用户选择仪表板时显示此按钮，如果用户浏览另一个使用我的地方header.html我不希望此按钮显示在那里

Answer 1

您可以将 observable/function 和 returns 布尔值绑定到可见的属性。像这样 <button data-bind="visible: isVisible"></button>。那么你需要做的就是计算出按钮可见或不可见的条件。

var vm = function(){
  var self = this;
  self.mode = ko.observable(false);
  self.DashboardEdit = ko.observable("Edit Dashboard");
  
  self.changeButtonText = function(){
    self.DashboardEdit("Edit Dashboard Changed");
    self.mode(!self.mode());
  }
  self.showDashboardButton = ko.observable(true);
  
  self.toggleDashboardButtonVisibility = function(){
    self.showDashboardButton(!self.showDashboardButton());
  }
  self.ProcurementbuttonText = ko.pureComputed(function(){
    return self.mode() ? 'Save' : 'Edit';
  });
}

ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="pull-right">
  <button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText, visible: showDashboardButton">
        <figure>
            <figcaption data-bind="text: $data.ProcurementbuttonText"></figcaption>
        </figure>
    </button>
</div>

<button data-bind="click: toggleDashboardButtonVisibility">Toggle Visibility</button>

使用 Knockout 仅在特定页面上显示按钮

Show button only on certain page with Knockout

knockout.js