1

ノックアウト.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');
    }
});
4

2 に答える 2

0

@MatthewJamesDavis による回答は、状況に取り組むためのよりクリーンな方法であるため、優れています。

ただし、当面の問題と実際の問題は、おそらく jQuerytext()関数が KO がスパンにバインドした適切な「50」を見つけられない理由です。その理由は、プログレス バーを設定するgetJSON実際のメソッドよりもかなり遅れてメソッドが起動されるためです。each適切なタイミングで呼び出される関数でそのビットをラップすることで、これを「解決」できます。

var viewModel;
$.getJSON('http://echo.jsontest.com/daysDue/50', function (data) {
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
    updateProgressBars(); // NEW
});

function updateProgressBars() { // NEW
    $('#paging1 ul li').each(function () {
        // As before...
    });
} // NEW

これで、 jQuery でデータを取得した後に進行状況バーが更新されます。

デモについては、このフィドルを参照してください。

繰り返しになりますが、jQuery を使用して手動で行うよりも、適切な進行状況バーの属性を KO にバインドする方がはるかに優れています。

于 2013-05-15T22:44:56.293 に答える