CODEWITHSUNDEEP
javascriptjqueryknockout.js
SerebroRaya
SerebroRaya

Reputation: 35

Knockout.js: Determine visibility based on compared properties

I have a Knockout view model that maintains three things: a list of default properties, a list of entities, and a list of entity classes. The entity classes each have a subset of the available entities and a separate list of properties that overwrite the default properties.

What I'm trying to do is highlight cases where the entity class has a property that overwrites the corresponding default without changing it -- a so-called 'bad overwrite'. I am new to Knockout and am unable to think of a way to do this. The issue is that it needs to be a computed property (as the table updates frequently, and the data is retrieved from a server) based on comparing a value that's deep in the viewmodel with one that's more shallow. The mapping looks like this:

function Master() //(view model)
{
    var self = this;
    self.EntityClasses = ko.observableArray();
    self.DefaultProperties = ko.observableArray();
    self.Entites = ko.observableArray();
}

function EntityClass()
{
    var self = this;
    self.Properties = ko.observableArray();
}

And I'm looking to compare a property that's in a given entity with the properties in the default properties list in order to determine if there are overwriting properties that are not different. The comparison would be where is below:

<div data-bind="foreach: EntityClasses">
  <span data-bind="if: PropertiesVisible">
    <h3><span data-bind="text: EntityClassName"></span> Properties</h3>
    <table>
    <tr><th>Property ID</th><th>Key</th><th>Value</th><th>Flags</th></tr>
    <tbody data-bind="foreach: Properties"> <!-- in that entity class -->
      <tr>
        <td data-bind="text: PropertyID"></td>
        <td data-bind="text: Key"></td>
        <td data-bind="text: Value"></td>
        <td>
          <span data-bind="if: <SOME BOOLEAN>"> <!-- if equal to default -->
            <!-- Indicate bad overwrite -->
          </span>
        </td>
        </tr>
      </tbody>
    </table>
  </span>
</div>

Upvotes: 0

Views: 69

Answers (1)

Domysee
Domysee

Reputation: 12854

Knockout includes so called computed obervables, which do exactly what you need. You can create them with ko.computed().
If you access other observables in the function passed to the computed observable, the computed will update automatically if the dependencies update.

function Master() //(view model)
{
    var self = this;
    self.EntityClasses = ko.observableArray();
    self.DefaultProperties = ko.observableArray();
    self.Entites = ko.observableArray();
    self.overwritingProperties = ko.computed(function(){
        //compare properties
        self.Entities.doSomething //<- when this observable updates (e.g. an entry is added), the computed observable is reevaluated automatically
        var result = true;
        return result;
    });
}

You can bind them like any other observable:

<span data-bind="if: overwritingProperties">

Upvotes: 1

Related Questions