Knockout run foreach loop on a variable instead of boject or array

Question

i have an object which contains a property.Like this

{
    "QuestionId":31,
    "ImportanceLevel":53
}

I bind the ImportanceLevel to a div and now i want to apply foreach loop that should run till it reaches the value of ImportanceLevel. Here is binding.

<div data-bind="foreach:ImportanceLevel">
    <span></span>
</div>

Here i want to generate span 3 times how can i do that? If this is not the proper way as i assume so what is an alternative. this generates some ui like this

enter image description here

If level is three it will display 3 circles.

http://stackoverflow.com/questions/15227373/knockout-js-loop-up-to-a-value/15227504#15227504 — Artem Vyshniakov, Nov 11 '13 at 10:46

score 0 · Accepted Answer · answered Nov 11 '13 at 10:57

Here is another suggestion for achieving the same effect, without the foreach binding. Use a div with a width that is computed based on the importance level. To make it display tiny blue dots, you can use the background-image. Something like this: http://jsfiddle.net/36vLE/5/

js:

var VM = function(){
    var self = this;
    self.importanceLevel = ko.observable(53);
    self.importanceWidth = ko.computed(function(){
       return (self.importanceLevel() * 2) + "px" 
    });
    self.increaseLevel = function(){
        self.importanceLevel(self.importanceLevel() + 10);
    }    
}

ko.applyBindings(new VM());

html:

<button data-bind="click:increaseLevel">increase importance</button>
<div data-bind="style:{width:importanceWidth}" id="importanceBar"></div>
<br />
<div data-bind="style:{width:importanceWidth}" id="importanceBar2"></div>

Knockout run foreach loop on a variable instead of boject or array

1 Answers1