binding the visibility of a input field in a template based on its position in its parents child list

24 views
Skip to first unread message

Brenda Kresse

unread,
Mar 23, 2018, 8:54:20 AM3/23/18
to KnockoutJS
In my fiddle:   fiddle example of the problem (code also added below)

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>



Brenda Kresse

unread,
Mar 23, 2018, 10:46:14 AM3/23/18
to KnockoutJS
ops fiddle address is slightly wrong, use this one... http://jsfiddle.net/bkhummingbird/q0mdw09z/

Brenda Kresse

unread,
Mar 23, 2018, 10:57:35 AM3/23/18
to KnockoutJS
Reply all
Reply to author
Forward
0 new messages