CODEWITHSUNDEEP
cssknockout.js
Sreevisakh
Sreevisakh

Reputation: 1926

Modifying values inside data-bind in knockout

I was developing a page using knockout. I have bind an array to the html as follows

data:

{'options':[{'name':'hi'},{'name':'hello'}])

html:

 <div data-bind="foreach: options">
       <div data-bind="text: name, css: name"></diV>
    </div>

Each option have an image and i am using css sprites. and the class name are like

div.option-<name>

css:

div.option-hi{
  background-color:black;
}
div.option-hello{
  background-color:black;
}

So this will only work if I can append

"div.option-"

to the name attribute inside data-bind. Is there anyway I can achieve this without modifying the array and adding one more attribute in to the populate array

Upvotes: 1

Views: 79

Answers (1)

nemesv
nemesv

Reputation: 139788

If you don't plan to change your array values or wrap them into viewmodels which will do the additional logic, then you can write expressions also directly in the bindings.

So you can do the string concatenation inside the css binding:

<div data-bind="foreach: options">
    <div data-bind="text: name, css: 'option-' + name"></div>
</div>

Demo JSFiddle.

Upvotes: 1

Related Questions