javascript - 淘汰赛条件工具

Question

我需要根据菜单项名称添加条件工具提示。我是淘汰赛的新手，不确定解决这个问题的最佳方法。

 <div id="pageMenu" data-bind="foreach: Pages">
        <div data-bind="visible: $data.accessAllowed() ">
            <a data-bind="click: $parent.openPage, css: { 'selected': Selected }"><div data-bind="text: MenuItemName"></div></a>

Answer 1

在此示例中，标题取决于 foo 和 bar 是否具有相同的文本。例如，如果您将 foo 的文本更改为 foo，则标题将为 title2

function bla(){
        self.text = ko.observable("Some text");
        self.bar = ko.observable("bar");
        self.foo = ko.observable("bar");
    }

ko.applyBindings(new bla());

<p data-bind="text: text, 
    attr:{
     'title': bar() === foo() ? 'title1' : 'title2'
     }">
</p>

Answer 2

您可以在视图模型中定义函数，您可以在其中放置显示工具提示的条件或像这样隐藏它：

function ViewModel(menuItemName) {
    ......
    self.visibleDiv = ko.computed(function () {
        //here you have the item that your are displaying.
        //So put here your logic and then 
        //you should return false or true
        .......
    });
}

然后在你的 html

<div class="editor-label" data-bind="text: MenuItemName,visible: $root.visibleDiv(MenuItemName)">

Answer 3

这应该是您正在寻找的。

<div id="pageMenu" data-bind="foreach: Pages">
  <div data-bind="visible: $data.accessAllowed() ">
    <a data-bind="click: $parent.openPage, css: { 'selected': Selected }">
      <div data-bind="attr : {'title' : ($data.MenuItemName() == 'criteria'? 'tooltip1' : 'tooltip2')} "></div>
    </a>
  </div>
</div>

我希望它有所帮助。