カウンターインクリメントが動的に機能していませんか？

Question

以下に示すように、新しい件名が生成されるたびにカウンタ増分数を動的に変更できますか？

動的に新しい件名を生成するとき、カウンタインクリメントの数値は変化しませんか？

新しいフィドルが提供されてくださいことができれば、私はまだコーディングに新しいですと、それは非常に多く、高く評価されるだろう。

Fiddle

ありがとうございました！

HTML：

<button class="button" data-bind="click: addClass">Add a New Class</button> 
<button class="button"> 
Apply 
</button> 
<hr> 

<ul align="center" data-bind="foreach: classes"> 
    <li> 
     <label class="number">Subject:</label><input type="text" data-bind="value: title" placeholder="E.g: English"/> 
     <select disabled data-bind="value: credits"> 
     <option selected data-bind="value: credits">1</option> 
     </select> 
     <label>Grade:</label> 
     <input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/> 
     <br> 
     <br> 
    </li> 
</ul> 



<hr /> 

<br> 
<h4> 
Your GPA is: <b><span data-bind="text: totalGPA"></span></b> 
</h4> 
<br> 
<h4> 
Final Grade: <span data-bind="text: totalGrade"></span> 
</h4> 

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400); 
* { text-rendering: optimizelegibility;} 
body, input, textarea, select, button { font-family: 'Open Sans', sans-serif; } 
pre { font-family: 'Inconsolata', monospace; } 

span {font-size: 18px;} 


h1 {font-size: 25px;} 



.number { 
    counter-reset: subsection; 
} 

.number:after { 
    counter-increment: section; 
    content: " " counter(section) ". "; 
} 

はJQuery：

var gradeMapping = { 
     'A+': 15, 
     'A': 14, 
     'A-': 13, 
     'B+': 12, 
     'B': 11, 
     'B-': 10, 
     'C+': 9, 
     'C': 8, 
     'C-': 7, 
     'D+': 6, 
     'D': 5, 
     'D-': 4, 
     'E+': 3, 
     'E': 2, 
     'E-': 1 
    } 
function Class(title, credits, letterGrade) { 
    var self = this; 
    self.title = ko.observable(title); 
    self.credits = ko.observable(credits); 
    self.letterGrade = ko.observable(letterGrade); 
    self.gpa = ko.computed(function() { 
     return gradeMapping[self.letterGrade()]; 
    }); 
} 

function GpaCalcViewModel() { 
    var self = this; 
    self.classes = ko.observableArray(); 
    self.totalGPA = ko.computed(function() { 
     var totalWeightedGPA = 0, 
      totalCredits = 0; 
     $.each(self.classes(), function() { 
      totalWeightedGPA += (this.gpa() * this.credits()); 
      totalCredits += (this.credits() * 1); 
     }) 
     return totalWeightedGPA/totalCredits; 
    }); 
    self.totalGrade = ko.computed(function() { 
     var totalWeightedGPA = 0, 
      totalCredits = 0; 
     var gradeLetter = null; 
     $.each(self.classes(), function() { 
      totalWeightedGPA += (this.gpa() * this.credits()); 
      totalCredits += (this.credits() * 1); 
     }); 
     $.each(gradeMapping, function(letter, number) { 
       if(number == Math.round(totalWeightedGPA/totalCredits)){ 
       gradeLetter = letter; 
      } 
     }) 
     return gradeLetter; 
    }); 
    self.addClass = function() { 
     self.classes.push(new Class()); 
    } 
}; 
var viewModel = new GpaCalcViewModel(); 
ko.applyBindings(viewModel); 

Answer 1

あなたの問題は、ノックアウトではなくCSS countersとは何の関係もありません。

あなたが最初にあなたのsectionカウンタをリセットする必要がありますが、「コンテナ」レベルでそれをしなければならない。

.list { 
    counter-reset: section; 
} 

.number:after { 
    counter-increment: section; 
    content: " " counter(section) ". "; 
} 

そして、あなたのulに「リスト」クラスを追加します。

<ul align="center" class="list" data-bind="foreach: classes"> 

デモhttp://jsfiddle.net/gqjgko04/

さらにKnocoutのソリューションは、$indexを使ってラベルを生成します。

<label data-bind="text: 'Subject: ' + ($index() + 1) + '.'"></label> 

デモhttp://jsfiddle.net/gqjgko04/1/。

または文字列連結削除するには、コンテナに以下の構文を使用して：

<label>Subject: <!-- ko text: $index() + 1 --><!-- /ko -->. </label>