0

プロパティを含むオブジェクトがあります。このように

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

ImportanceLevel を div にバインドし、ImportanceLevel の値に達するまで実行する foreach ループを適用したいと考えています。ここにバインディングがあります。

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

ここでスパンを3回生成したいのですが、どうすればできますか? これが私が想定する適切な方法ではない場合、代替手段は何ですか。これは、このようなUIを生成します

ここに画像の説明を入力

レベルが 3 の場合、3 つの円が表示されます。

4

1 に答える 1

0

foreach バインディングなしで同じ効果を達成するための別の提案を次に示します。重要度に基づいて計算された幅の div を使用します。小さな青い点を表示するには、背景画像を使用できます。このようなもの: 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>
于 2013-11-11T10:57:46.040 に答える