Q: Where clause available in knockoutjs? I have a scenario while developing an application. I have an object named MyImage as:
function MyImage(imgUrl,id){
   this.ImageUrl = ko.observable(imgUrl);
   this.Id = ko.observable(id);
   this.Attributes = ko.observableArray([]);

   var theWidth = new TheAttributes(0,'width','120px');
   this.Attributes().push(theWidth);

   var theHeight = new TheAttributes(0,'height','120px');
   this.Attributes().push(theHeight );
}

A lot of css attributes can get added in Attributes array by the end user,
the attributes are defined as:
function TheAttributes(id,attName,attValue)
{
   this.Id = ko.observable(id);
   this.AttName = ko.observable(attName);
   this.AttValue = ko.observable(attValue);
}

End user will have a list of images, s/he can select one by clicking on it and once an image is selected, user shall be able to edit its info and attributes. At the moment what I am thinking to do is like:
<div data-bind="with: $root.SelectedImage">
    Image File selection controls and than
    <ul data-bind="foreach: Attributes">
        <!-- ko if: AttName == 'width' -->
        <li>Show label and text field for width</li>
        <!-- /ko -->
        <!-- ko if: AttName == 'height' -->
        <li>Show label and text field for height</li>
        <!-- /ko -->
        <!-- ko if: AttName == 'backgroundColor' -->
        <li>Show label and Dropdown field for color selection</li>
        <!-- /ko -->
    </ul>
</div>

I wanted to ask if this is the correct approach or is there any better alternative and is there any "where" clause kind of mechanism available in knockout so that I can maintain the sequence of fields.

A: I wouldn't put that logic inside your template. Instead, I would create a list of available attributes in your view model:
function MyImage(imgUrl,id){
   this.AvailableAttributes = {
       width: 'Show label and text field for width',
       height: 'Show label and text field for height',
       backgroundColor: 'Show label and Dropdown field for color selection'
   };
   this.ImageUrl = ko.observable(imgUrl);
   this.Id = ko.observable(id);
   this.Attributes = ko.observableArray([]);

   var theWidth = new TheAttributes(0,'width','120px');
   this.Attributes().push(theWidth);

   var theHeight = new TheAttributes(0,'height','120px');
   this.Attributes().push(theHeight );
}

So you can do the following in your template: 
<div data-bind="with: $root.SelectedImage">
    Image File selection controls and than
    <ul data-bind="foreach: Attributes">
        <!-- ko if: AvailableAttributes[AttName] -->
            <li data-bind="text: AvailableAttributes[AttName]"></li>
        <!-- /ko -->
    </ul>
</div>

To maintain the sequence you could write a computed which sorts Attributes based on the order of AvailableAttributes.
