лучший способ обработки элементов меню ленты меняется

Question

Я пишу код, который будет вести себя как файловый обозреватель в браузере. Задачи, доступные для отображаемых объектов объекта, потенциально различаются в зависимости от объекта. Например, возможно, я могу выполнить задачу A в папке, а Task B - файл. Может быть много задач, связанных с объектом. Моя мысль заключалась в том, чтобы скрыть задачи, которые не применяются в ленте/строке меню (независимо от используемого контейнера), когда этот тип объекта выбран.

В настоящее время я использую knockoutjs. Я собирался привязываться к типу объекта и использовать условные обозначения, чтобы сделать его невидимым при необходимости.

Я новичок в JavaScript на стороне клиента и хотел узнать, подходит ли этот подход. Это?

Answer 1

Путь облегчает использование разных шаблонов для каждого типа объектов. При привязке шаблона вы можете указать имя шаблона, которое будет связано с типом объекта.

Этот JSFiddle является рабочим образцом идеи. Существует два разных шаблона: person и animal, которые показывают разные свойства объекта. Вы можете применить эту идею для раскрытия различных функций, используя различные привязки click в каждом шаблоне.

Я скопировал его на следующий фрагмент кода:

var john = { \t 
 
     name:'John', 
 
     age: 21 
 
\t }; 
 
ko.applyBindings(john, shorthand); 
 

 
var krispin = { 
 
    name: 'Krispin', 
 
    breed: 'Akita Inu' 
 
}; 
 

 
var vmExplicit = { 
 
    john: john, 
 
    krispin: krispin 
 
}; 
 
ko.applyBindings(vmExplicit, explicit); 
 

 
var vmExplicit2 = { 
 
    items: [ \t 
 
     { name: 'person', data: john}, 
 
    \t { 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

Вот небольшой пример того, как это может быть сделано в нокаут. У вас есть выбор из трех инструментов, каждый из которых включает определенные кнопки. Когда инструмент не выбран, кнопки не отображаются. Когда инструмент выбран, кнопки отображаются, но только те, которые должны быть включены для этого инструмента, включены.

Я добавил еще один способ, когда правила немного сложнее. В этом случае вам нужно иметь computed, чтобы определить, следует ли включать инструмент. Инструмент должен иметь canDoAи необходимо установить флажок, чтобы кнопка «Опасность» была поставлена ​​на охрану.

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>