title: Knockout: Best way to bind visibility to both item and a parent property?
body: <p>I am creating an edit screen where I want people to delete items from a list. The list is displayed normally, until the "controller" object goes into edit mode. Then the user can delete items. Items should be flagged for deletion and displayed as such, then when the user saves the edit, they are deleted and the server notified.</p>
  
  <p>I actually have this all working, but the only way I could do it was using literal conditions in the bindings, which looks ugly and I don't really like. Is there a better way of doing it?</p>
  
  <p>Working Fiddle: <a href="http://jsfiddle.net/L1e7zwyv/" rel="nofollow">http://jsfiddle.net/L1e7zwyv/</a></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div id="test"&gt;
          &lt;a data-bind="visible: IsViewMode, click: edit"&gt;Edit&lt;/a&gt;
          &lt;a data-bind="visible: IsEditMode, click: cancel"&gt;Cancel&lt;/a&gt;
          &lt;hr/&gt;
          &lt;ul data-bind="foreach: Items"&gt;
                  &lt;li data-bind="css: CssClass"&gt;
                          &lt;span data-bind="visible: $parent.IsViewMode() || $data._Deleting(), text: Value"&gt;&lt;/span&gt;
                          &lt;!-- ko if: $parent.IsEditMode() &amp;&amp; !$data._Deleting() --&gt;
                                  &lt;input type="text" data-bind="value: Value"/&gt;
                                  &lt;a data-bind="click: $parent.deleteItem"&gt;Del&lt;/a&gt;
                          &lt;!-- /ko --&gt;
                  &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>function ItemModel(val)
  {
          var _this = this;
  
          this.Value = ko.observable(val);
          this._Deleting = ko.observable();
  
          this.CssClass = ko.computed(
                  function()
                  {
                          return _this._Deleting() ? 'deleting' : '';
                  }
          );
  }
  
  function ManagerModel()
  {
          var _this = this;
  
          this.Items = ko.observableArray([
                  new ItemModel('Hell'),
                  new ItemModel('Broke'),
                  new ItemModel('Luce')
          ]);
  
          this.IsEditMode = ko.observable();
          this.IsViewMode = ko.computed(function() { return !_this.IsEditMode(); });
  
          this.edit = function(model, e)
          {
                  this.IsEditMode(true);
          };
  
          this.cancel = function(model, e)
          {
                  for(var i = 0; i &lt; _this.Items().length; i++)
                          _this.Items()[i]._Deleting(false);
  
                  this.IsEditMode(false);
          };
  
          this.deleteItem = function(model, e)
          {
                  model._Deleting(true);
          };
  }
  
  ko.applyBindings(new ManagerModel(), document.getElementById('test'));
  </code></pre>