ノックアウト.jsを使用してjsonから数値を取得し、jqueryを使用してプログレスバーを調整しようとしています。
手動で html に番号を入力すると機能します。数値をjsonで持ち込むと動きません。
これがノックアウト/json および jquery との競合なのか、それともコードが間違っているのかわかりません。
http://jsfiddle.net/infatti/5Q9pK/
// Knockout.js - bring in number of days from json
// -------------------------
// Here's my data model
var viewModel;
$.getJSON('http://echo.jsontest.com/daysDue/50', function (data) {
viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
});
// Progress Bar - adjust width of progress bar according to number of days
// -------------------------
$('#paging1 ul li').each(function () {
// progress bar
// find number of days until due date
var progBarValue = $(this).find('.days-due').text();
// limit days due to no more than 100%
progBarValue = progBarValue > 100 ? 98 : progBarValue;
// set progress bar width
$(this).find('.bar').width((100 - progBarValue) +'%');
// set class of progress bar for color based on days due
if (progBarValue >= 75) {
$(this).find('.progress').removeClass('progress-warning progress-danger').addClass('progress-success');
$(this).find('.DueDate').removeClass('urgent');
} else if (progBarValue >= 25 && progBarValue <= 74) {
$(this).find('.progress').removeClass('progress-success progress-danger').addClass('progress-warning');
$(this).find('.DueDate').removeClass('urgent');
} else if (progBarValue <= 24) {
$(this).find('.progress').removeClass('progress-warning progress-success').addClass('progress-danger');
$(this).find('.DueDate').addClass('urgent');
}
});