title: knockout -binding the visibility of a input field in a template based on its position in its parents child list
body: <p>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.  </p>
  
  <p>So to do this i created a ko.computed function named <strong>visibleLogicLink</strong> and used that in the data bind for styles to set the visibility; but this is not working.  </p>
  
  <p>Can anyone give me guides how to make this work?</p>
  
  <p><a href="https://i.stack.imgur.com/UDN7R.png" rel="nofollow noreferrer">image showing the current code output compared to what I am trying to get as output.</a></p>
  
  <p><strong>In my fiddle: <a href="http://jsfiddle.net/bkhummingbird/q0mdw09z" rel="nofollow noreferrer">fiddle example of the problem</a>   (code also added below)</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/queryBuilder/Bootstrap/css/bootstrap.min.css" /&gt;
  &lt;script src="../libs/knockout.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  //~~~~~~~~~~~~~~~~~~~~~~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);
  &lt;/script&gt;
  &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~MODEL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;
  &lt;div class="container"&gt;
    &lt;div data-bind="with: group"&gt;
      &lt;div data-bind="template: templateName"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- ~~~~~~~~~~~~~~~group-template~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;
  &lt;script type="text/html" id="group-template"&gt;
    &lt;div class="alert alert-warning alert-group" style="border-width: 5px;border-color:blue;"&gt;
  
      &lt;select data-bind="options: logicalGrpOperators,
              style:{'visibility' : $parent.visibleLogicLink }"&gt;
        &lt;/select&gt; this thing
  
      &lt;button data-bind="click: addGroup"&gt;
              &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt; Add Group
        &lt;/button&gt;
      &lt;button data-bind="click: $parent.removeChild"&gt;
              &lt;span class="glyphicon glyphicon-minus-sign"&gt;&lt;/span&gt; Remove Group
        &lt;/button&gt;
      &lt;div class="group-conditions"&gt;
        &lt;div data-bind="foreach: children"&gt;
          &lt;div data-bind="template: templateName"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  &lt;script&gt;
    window.addEventListener('load', function() {
      ko.applyBindings(new QueryBuilder.ViewModel());
    }, true);
  &lt;/script&gt;
  </code></pre>