I have coded a knockout template example that allows the user to create a group of groups. (simplified version of what i am doing) In each instance of a group (which is a template) I have a logic selection input box. I want to make that input box not display if the group row is the first in side a parent group.
So to do this i created a ko.computed function named visibleLogicLink and used that in the data bind for styles to set the visibility; but this is not working.
Can anyone give me guides how to make this work?
<link rel="stylesheet" href="css/queryBuilder/Bootstrap/css/bootstrap.min.css" />
<script src="../libs/knockout.js"></script>
<script>
//~~~~~~~~~~~~~~~~~~~~~~group~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.QueryBuilder = (function(exports, ko) {
var Condition = exports.Condition;
/**
* creates an instants of the group template.
*/
function Group() {
var self = this;
self.templateName = 'group-template';
self.children = ko.observableArray();
self.logicalGrpOperators = ko.observableArray(['AND', 'OR']);
self.visibleLogicLink = ko.computed(function(child) {
if (0 == self.children.indexOf(child))
return "hidden";
else
return "visible";
});
self.addGroup = function() {
self.children.push(new Group());
};
self.removeChild = function(child) {
self.children.remove(child);
};
}
exports.Group = Group;
return exports;
})(window.QueryBuilder || {}, window.ko);
//~~~~~~~~~~view model~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.QueryBuilder = (function(exports, ko) {
var Group = exports.Group;
function ViewModel() {
var self = this;
self.group = ko.observable(new Group());
}
exports.ViewModel = ViewModel;
return exports;
})(window.QueryBuilder || {}, window.ko);
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~MODEL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<div data-bind="with: group">
<div data-bind="template: templateName"></div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~group-template~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<script type="text/html" id="group-template">
<div class="alert alert-warning alert-group" style="border-width: 5px;border-color:blue;">
<select data-bind="options: logicalGrpOperators,
style:{'visibility' : $parent.visibleLogicLink }">
</select> this thing
<button data-bind="click: addGroup">
<span class="glyphicon glyphicon-plus-sign"></span> Add Group
</button>
<button data-bind="click: $parent.removeChild">
<span class="glyphicon glyphicon-minus-sign"></span> Remove Group
</button>
<div class="group-conditions">
<div data-bind="foreach: children">
<div data-bind="template: templateName"></div>
</div>
</div>
</div>
</script>
<script>
window.addEventListener('load', function() {
ko.applyBindings(new QueryBuilder.ViewModel());
}, true);
</script>