knockout.js - 使用 ko.computed 将输入值格式化为百分比

Question

我正在尝试以百分比形式显示从下拉列表中选择的可观察存储 View 并使其可编辑。不太确定如何在计算函数的读/写中获取和引用可观察对象。这不起作用...

http://jsfiddle.net/PastorBones/zmdJb/

脚本

function viewModel(){
    var self = this;

    self.data = [
        {name: 'Test1', percent: ko.observable(.1)},     
        {name: 'Test2', percent: ko.observable(.543)},         
        {name: 'Test3', percent: ko.observable(.0123)}         
    ];
    self.selOption = ko.observable();
    self.chosenOptions = ko.observableArray();
    self.addData = function(){
        if(typeof(self.selOption) !== 'undefined'){
          self.chosenOptions.push(self.selOption());
          self.selOption(undefined);
        }  
    }
    self.formatAsPercent = ko.computed({
        read: function(obj){
            if(typeof(obj) === 'undefined') return '';                
            return (obj.percent() * 100).toFixed(2) + '%';
        },
        write: function(obj){
            var val = obj.percent().replace('%','');
            obj.percent(val / 100);            
        }
    });
}

ko.applyBindings(new viewModel());
​

HTML

<select data-bind="options: data, optionsText: 'name', optionsCaption: 'Choose...', value: selOption"></select>
<button data-bind="click: addData, enable: typeof(selOption()) !== 'undefined'">+</button>

<div data-bind="foreach: chosenOptions">
    <div>
        <span data-bind="text: $data.name"></span>
        <input data-bind="value: $root.formatAsPercent($data)" />
    </div>
</div>
​

Answer 1

要访问子项的属性，应在子级 级别定义计算属性。查看修改后的 fiddle :http://jsfiddle.net/zmdJb/3/