Question

我有一个来自json的号码。使用knockout.js我想读取该数字并使用它来设置div的宽度。例如：数字50等于div上的50px宽度。

如何在knockout.js中创建一个函数来执行此操作？

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

编辑：这在我的小提琴中起作用，但这里出了点问题。这与我的data.dueDays有关吗？

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

Answer 1

这里有一种可能的方式作为例子：

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

并绑定为

 <div class="bar" data-bind="attr: { style: barWidth }"></div>

Knockout.js从json数字进度条宽度

1 个答案: