Question

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

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

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

Answer 1

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

这个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>

Answer 2

这是一个在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>

处理功能区菜单项更改

2 个答案: