js进度条宽度从json编号

Knockout.js progress bar width from json number

本文关键字：json 编号 js      更新时间：2023-09-26

我有一个数字从json拉进来。使用knockout.js我想读取该数字并使用它来设置div的宽度。例如:数字50将等于div上的50px宽度。

我如何在knockout.js中创建一个函数来做到这一点?

http://jsfiddle.net/infatti/zEWuZ/

<ul>
  <li>
    <span class="days-due" data-bind="text: daysDue"></span> days due
    <div class="bar"></div>
  </li>
</ul>
// Here's my data model
var viewModel;
$.getJSON('http://echo.jsontest.com/daysDue/50', function (data) {
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
});

编辑:这在我的小提琴现在工作，但有些地方是错误的。这和我的数据有关吗?

    // Here's my data model
    var viewModel;
    $(document).ready(function() {
        $.getJSON('my/json', function (data) { 
            ko.mapping.fromJS(data.workflowItemViewModels, {}, viewModel.workflowItemViewModels);
            viewModel = new DashboardViewModel();
            viewModel.barWidth = "width: " + data.dueDays + "px";
            ko.applyBindings(viewModel);
        });
    });

这里有一个可能的方法作为例子:

// Here's my data model
var viewModel;
   $.getJSON('http://echo.jsontest.com/daysDue/50', function (data) {
    viewModel = ko.mapping.fromJS(data);   
    viewModel.barWidth = "width: " + data.daysDue + "px;";
    ko.applyBindings(viewModel);
});

和bind为

 <div class="bar" data-bind="attr: { style: barWidth }"></div>
相关文章：