Question

我正在使用MVC 5和Knockout来创建一个页面，其中列出了名称，并且每个名称都有一个选择列表（所有行的统一数据）。在'applyBinding'上，可见绑定和css绑定有效，但是在后续更改列表项的选择时，修改的行不遵循任何绑定。我的剧本是......

function Names(data){
    var self = this;
    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
    self.reqStatus = ko.observable(data.reqStatus);
    self.rejReason = ko.observable(data.rejReason);
    self.showReason = ko.observale(false);

    self.reqStatus.subscribe(function(newValue){
        if (newValue == 2){
            self.showReason = true;
        }
    });

    self.statusCss = ko.computed(function(){
        if (self.reqStatus() == 2) {
            return "rejected";
        }else if (self.showReason() == true){
            return "rejected";
        }else{
            return "accepted";
        }
    });
}

function Reason(data){
    var self = this;
    self.id = ko.observable(data.id);
    self.text = ko.observable(data.text);
}

var reasons = ko.observableArray([]);
$.getJSON(....gets Reason JSON....) 

function Status(data){
    var self = this;
    self.id = ko.observable(data.id);
    self.title = ko.observable(data.title);
}

var listItems = ko.observableArray([]);
$.getJSON(....gets Status JSON....)

用于填充listItems数组

function ViewModel(data){
    var self = this;
    self.names = ko.observableArray(data);
    $getJson(...gets Names JSON .....) - to fetch and map data

    self.Save = function(){
        // Code to save data.
        jsonArray = ko.toJSON(this.names);
        // Here I can see that the select list value change has been effected in observableArray of 'names'!
    }

    self.acceptCount = ko.computed(function(){
        var acc = 0;
        ko.utils.arrayForEach(.... to get the value);
    });
};

ko.applyBindings(new ViewModel());

我的HTML ...

<div>
   <p> Total Accepted :<span data-bind="text: acceptCount"></span></p>
   <table>
       <tbody data-bind="foreach: names">
           <tr data-bind="css: statusCss">
               <td><span data-bind="text: name"></span></td>
               <td><select data-bind="options: listItems, optionText: 'title', optionValue:'id', value: reqStatus"></select> </td>
               <td><select data-bind="options: reasons, optionText: 'text', optionValue:'id', value: rejReason, visible: showReason" ></select></td>
           </tr>
       </tbody>
   </table>
</div>

加载页面时;可见绑定和CSS绑定效果很好。 1 - 问题是当所选列表项被更改时，所需的可见绑定和CSS绑定不会发生。但是，当我单击“保存”按钮并将数组转换为JSON时，我可以看到所选列表项中的更改是否存在，那么为什么不进行绑定呢？ 2 - 当我更改选择列表项目（第一个）时;如果选择将导致CSS更改的值，则会出错...

JavaScript运行时错误：预期的功能

此处引发此错误

self.statusCss = ko.computed(function(){
        if (self.reqStatus() == 2) {
            return "rejected";
        }else if (self.showReason() == true){ // <--- error here
            return "rejected";
        }else{
            return "accepted";
        }
    }

Answer 1

我已经修复了实际上是一个小错误的问题...在我的计算属性中，我不止一次访问被观察的属性，这就是它没有返回正确的值并引发脚本错误的原因。修改后的代码是......

    self.statusCss= ko.computed(function () {
        var selectedVal = self.reqStatus();
        if (selectedVal) {
            if (selectedVal === 2) {
                return "rejected";
            } else if (selectedVal === 7) {
                return "late";
            }
        };
    });

更改显示/隐藏第二个选择列表时的Knockout选择列表值

1 个答案: