处理功能区菜单项更改的最佳方式

best way to handle ribbon menu items changing

本文关键字：最佳 方式 功能区 菜单项 处理      更新时间：2023-09-26

我正在编写的代码基本上就像浏览器中的文件资源管理器。可用于显示的对象项目的任务可能因对象而异。例如，也许我可以对文件夹执行任务A，对文件执行任务B。可以有许多任务与对象关联。我的想法是，当选择该类型的对象时，隐藏功能区/菜单栏中不应用的任务（无论我使用什么容器）。

目前我使用的是knockoutjs。我打算绑定到对象的类型，并在需要时使用条件使其不可见。

我是客户端javascript的新手，想看看这是否是一个好方法。是吗？

最简单的方法是为每种对象使用不同的模板。绑定模板时，可以指定与对象类型相关的模板名称。

这个JSFiddle是这个想法的一个工作样本。有两个不同的模板，分别命名为person和animal，它们显示了对象的不同属性。通过在每个模板中使用不同的click绑定，您可以将此想法应用于公开不同的功能。

我已经把它复制到下面的片段：

var john = {	
        name:'John', 
        age: 21 
	};
ko.applyBindings(john, shorthand);
var krispin = {
    name: 'Krispin',
    breed: 'Akita Inu'
};
var vmExplicit = {
    john: john,
    krispin: krispin
};
ko.applyBindings(vmExplicit, explicit);
var vmExplicit2 = { 
    items: [	
        { name: 'person', data: john},
    	{ name: 'animal', data: krispin}],
};
ko.applyBindings(vmExplicit2, explicit2);
   
.a {
    border: solid 1px silver;
    padding: 10px;
    margin-bottom: 15px;
}
h5 {
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>Shorthand</h5>
<div id="shorthand">
  <div data-bind="template: 'person'" class="a"></div>
</div>
<h5>Explicit</h5>
<div id="explicit">
    <div data-bind="template: {name: 'person', data: john}" class="a"></div>
    <div data-bind="template: {name: 'animal', data: krispin}" class="a"></div>
</div>
<h5>Explicit 2</h5>
<div id="explicit2">
    <div data-bind="foreach: items">
        <div data-bind="template: $data" class="a"></div>
    </div>
</div>
   
<script type="text/HTML" id="person">
    <h5>Person template</h5>
    Name: <span data-bind="text:name"></span><br/>
    Identity number: <span data-bind="text:age"></span>
</script>
<script type="text/HTML" id="animal">
    <h5>Animal template</h5>
    Name: <span data-bind="text:name"></span><br/>
    Breed: <span data-bind="text:breed"></span>
</script>

这里有一个如何在Knockout中完成的小例子。您可以选择三个工具，每个工具都可以启用特定的按钮。如果未选择任何工具，则不会显示按钮。选择某个工具后，将显示按钮，但仅启用该工具应启用的按钮。

当规则有点复杂时，我添加了另一种方法。在这种情况下，您需要一个computed来决定是否应该启用该工具。该工具必须具有canDoA和必须选中waiver复选框以启用危险按钮。

function tool(name, canDoA, canDoB) {
  return {
    name: name,
    canDoA: canDoA,
    canDoB: canDoB,
    click: function(data) {
      console.log(data);
    }
  };
}
vm = {
  tools: [
    tool('First', true, false),
    tool('Second', false, true),
    tool('Third', true, true)
  ],
  selectedTool: ko.observable(),
  waiver: ko.observable(),
  boom: function() {
    console.log("BOOM!");
  }
};
vm.bigButtonEnabled = ko.computed(function() {
  return vm.selectedTool() && vm.selectedTool().canDoA && vm.waiver();
});
ko.applyBindings(vm);
.big-button {
  font-size: 200%;
  color: white;
}
.big-button:enabled {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Tool:
<select data-bind="options:tools, optionsText: 'name', optionsCaption: '--Select--', value:selectedTool"></select>
<!-- ko with:selectedTool -->
<button data-bind="enable:canDoA, click: click.bind($data, 'A')">A</button>
<button data-bind="enable:canDoB, click: click.bind($data, 'B')">B</button>
<!-- /ko -->
<div>
  Waiver signed:
  <input type="checkbox" data-bind="checked:waiver" />
  <br />
  <button data-bind="enable:bigButtonEnabled, click: boom" class="big-button">Danger</button>
</div>

相关文章：