对敲门.js json数据执行jQuery

Question

我试图使用敲门.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');
    }
});

Answer 1

你可以这样做。 但是，如果计划使用jQuery操作DOM，则没有必要将数据加载到剔除viewModel中。 您是否考虑过执行以下操作：

将计算的可观察值用于宽度和类别

var viewModel;
$.getJSON('http://echo.jsontest.com/daysDue/50', function (data) {
    viewModel = ko.mapping.fromJS(data);
    viewModel.progressBarWidth = ko.computed(function() { 
        return 100 - this.daysDue() + '%'
    }, this);
    viewModel.progressBarClass = ko.computed(function() {
        // note if (100 - x) >= 75, then x <= 25, etc.
        if (this.daysDue() <= 25) { return 'classa'; }
        else if (this.daysDue() > 25 && this.daysDue() <= 75) { return 'classb'; }
        else { return 'classc'; }
    ko.applyBindings(viewModel);
});

现在，您有了一个计算出的可观测值，它可以计算出您感兴趣的两个值：width和class。

DOM绑定和CSS

我不确定您的DOM的结构，但我会猜测。

<!-- container -->
<div data-bind="css: progressBarClass">
    <!-- progress bar -->
    <div class="progress" data-bind="style: { width: progressBarWidth }"></div>
    <!-- text -->
    <div class="DueDate" data-bind="text: daysDue"></div>
</div>

然后剩下的就是在CSS中设置类，以寻找父类进行声明。 因此，例如，对于> = 75天的情况，您可以：

.classa > .progress 
{
    // progress bar style, red or whatever
}
.classa .DueDate
{ 
    // text style, red or whatever
}

Answer 2

@MatthewJamesDavis的回答很好，因为这是解决情况的一种更干净的方法。

但是，当前的问题和实际问题可能是为什么jQuery text()函数没有找到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获取数据后 ，进度条将更新。

看到这个小提琴演示。

再说一次， 将适当的进度条属性与KO 绑定 ，而不是使用jQuery手动绑定，是更好的方法。