Question

我是knockout.js的新手

我想在更改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

你的代码存在很多问题，如果不将这个答案转化为淘汰教程，很难将它们全部列出来。

已经有knockout tutorial，我相信你应该接受它。

同样停留在梦幻般的documentation。您当前的尝试表明缺乏对库应该如何工作的基本理解，以及在编写更多代码之前您需要解决的问题。

最重要的是，您尝试使用jQuery来解决部分问题。不要这样做。让jQuery脱离图片。您通常不需要在淘汰应用程序中使用它，绝对不应该出现在您的视图模型中。没有jQuery DOM更新，没有从viewmodel内部处理jQuery事件。 HTML视图中也没有jQuery。

以下是我认为你想做的工作片段，减少到最低限度。在JS vievmodel和HTML视图中都有很多变化。请彻底比较您的代码。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

2 个答案: