Onchange组合框，更改另一个文本框的值

Question

我是基因敲除的新手

我想在更改EmployeeCode组合框时更改Salary的值，但我在Salary文本框中的值未更改为12。

这是我的代码

我的JS：

var jsDetail = function (data) {
        this.Code = ko.observable(data.Code || '');
        this.SalaryCode = ko.observable(data.SalaryCode || '');
        this.EmployeeCode = ko.observable(data.EmployeeCode || '');
        this.WorkDay = ko.observable(data.WorkDay || 0);
        this.OvertimeWorkDay = ko.observable(data.OvertimeWorkDay || 0);
        this.Salary = ko.observable(data.Salary || 0);
        this.MealAllowance = ko.observable(data.MealAllowance || 0);
        this.OvertimePay = ko.observable(data.OvertimePay || 0);
        this.TotalMealAllowance = ko.observable(data.TotalMealAllowance || 0);
        this.TotalOvertimePay = ko.observable(data.TotalOvertimePay || 0);
        this.TotalPay = ko.observable(data.TotalPay || 0);
        this.Deleted = ko.observable((data.IsDeleted || 'false').toString());
    };

    var jsSalaryViewModel = function (json) {
        ko.mapping.fromJS(json, {
            SalaryDetails: {
                create: function (option) {
                    return new jsDetail(option.data);
                }
            }
        }, this);

        this.addNewDetail = function () {
            this.SalaryDetails.push(new jsDetail({}));
            $("#properties tbody").trigger('sortupdate');
        }.bind(this);

        this.removeDetail = function (detail) {
            this.SalaryDetails.remove(detail);
        }.bind(this);


        this.employeeChange = function (detail) {
            console.log(detail.Salary);
            datail.Salary = 12;
        }.bind(this);
    };

    var viewmodel = new jsSalaryViewModel(@Html.Raw(json));
    ko.applyBindings(viewmodel);

我的组合框和文本框：

        <select data-bind="event: { change : $root.employeeChange }, value:EmployeeCode, attr : {name: 'SalaryDetails[' + $index() + '].EmployeeCode'}" class="form-control">
            <option value=""> </option> 
            <option value="1"> One </option> 
        </select>
        <input type="number" data-bind="value:Salary, attr : {name: 'SalaryDetails[' + $index() + '].Salary'}" class="form-control" /> 

请帮我。

Answer 1

您的代码有很多问题，如果不将答案变成淘汰赛指南，很难一一列出。

已经有一个淘汰赛教程 ，我相信您应该接受它。

也可以停下精彩的文档 。 您当前的尝试表明对库应该如何工作缺乏基本的了解，这是您在编写更多代码之前绝对需要解决的问题。

最突出的错误是您尝试使用jQuery解决部分问题。 不要那样做 将jQuery放在图片之外。 通常，您在淘汰赛应用程序中不需要它，并且绝对不要在视图模型中显示它。 没有jQuery DOM更新，没有从视图模型内部进行jQuery事件处理。 HTML视图中也没有jQuery。

接下来是我想做的工作片段，已降至最低。 JS vievmodel和HTML视图中都有很多更改。 请与您的代码进行彻底比较。

 function SalaryDetail(data) { data = data || {}; this.EmployeeCode = ko.observable(data.EmployeeCode || ''); this.Salary = ko.observable(data.Salary || 0); }; function SalaryEditor(data) { var self = this; self.currentDetail = ko.observable(); ko.mapping.fromJS(data, { SalaryDetails: { create: function(option) { return new SalaryDetail(option.data); } } }, self); self.addNewDetail = function() { self.SalaryDetails.push(new SalaryDetail()); }; self.removeDetail = function(detail) { self.SalaryDetails.remove(detail); }; self.employeeChange = function(detail) { self.currentDetail().Salary(12); }; }; var viewmodel = new SalaryEditor({ SalaryDetails: [ {EmployeeCode: '12345', Salary: 40}, {EmployeeCode: '23456', Salary: 50}, {EmployeeCode: '34567', Salary: 60}, {EmployeeCode: '45678', Salary: 70} ] }); ko.applyBindings(viewmodel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> <select data-bind=" value: currentDetail, options: SalaryDetails, optionsText: 'EmployeeCode', optionsCaption: 'select detail...' " class="form-control"> </select> <span data-bind="with: currentDetail"> <input type="number" data-bind="value: Salary" class="form-control" /> <button data-bind="click: $root.employeeChange">Reset Salary</button> <button data-bind="click: $root.removeDetail">Remove Detail</button> </span> <button data-bind="click: $root.addNewDetail">Add Detail</button> <hr>Viewmodel state: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

Answer 2

 function SalaryDetail(data) { data = data || {}; this.EmployeeCode = ko.observable(data.EmployeeCode || ''); this.Salary = ko.observable(data.Salary || 0); }; function SalaryEditor(data) { var self = this; self.currentDetail = ko.observable(); ko.mapping.fromJS(data, { SalaryDetails: { create: function(option) { return new SalaryDetail(option.data); } } }, self); self.addNewDetail = function() { self.SalaryDetails.push(new SalaryDetail()); }; self.removeDetail = function(detail) { self.SalaryDetails.remove(detail); }; self.employeeChange = function(detail) { self.currentDetail().Salary(12); }; }; var viewmodel = new SalaryEditor({ SalaryDetails: [ {EmployeeCode: '12345', Salary: 40}, {EmployeeCode: '23456', Salary: 50}, {EmployeeCode: '34567', Salary: 60}, {EmployeeCode: '45678', Salary: 70} ] }); ko.applyBindings(viewmodel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> <select data-bind=" value: currentDetail, options: SalaryDetails, optionsText: 'EmployeeCode', optionsCaption: 'select detail...' " class="form-control"> </select> <span data-bind="with: currentDetail"> <input type="number" data-bind="value: Salary" class="form-control" /> <button data-bind="click: $root.employeeChange">Reset Salary</button> <button data-bind="click: $root.removeDetail">Remove Detail</button> </span> <button data-bind="click: $root.addNewDetail">Add Detail</button> <hr>Viewmodel state: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>