計數遞增不能動態工作？

每次生成新的主題行時，是否可以動態更改計數器遞增號碼，如下所示？計數遞增不能動態工作？

動態生成新的主題行時，計數遞增數不會更改嗎？

如果能夠提供一個新的小提琴請，那將是非常讚賞，因爲我還是新的編碼。

謝謝！

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);

來源

2016-04-20 Dave

請儘量代碼修剪到* *最少需要攝製。你的代碼中有很多*事情與這個問題看似無關，但也有一些我認爲不存在（例如數字的視圖代碼）。檢查「[mcve]」以獲得指導。 – Jeroen

您的問題無關，但淘汰賽與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>

來源

2016-04-20 06:31:00 nemesv

計數遞增不能動態工作？

回答

相關問題