javascript - knockout 确定下拉列表选择并将文本更新到数据库

Question

我正在努力绑定(bind)从数据库检索的一些数据，然后将其更新回数据库。在这种情况下，数据库表有点奇怪，但我得到指示不要修改现有数据库。

事情的工作原理如下: 数据库表中同时包含GoldMemberCardNo和SilverMemberCardNo，其中一次只填充其中一个(另一个为空)。

我需要根据是否为空来确定成员(member)是 GoldMemberCardHolder 还是 SilverMemberCardHolder，并将正确的成员(member)(成员(member)类别和金/银卡号)绑定(bind)到初始页面加载时的下拉列表和文本输入。 区分成员(member)是金卡成员(member)还是银卡成员(member)的唯一方法就是查看该成员(member)的卡号是否填写

然后，管理员有权从选择中进行选择并根据需要输入卡号，然后提交表单。

假设用户之前是银卡成员(member)卡，现在需要变更为金卡成员(member)卡。管理员填写所需信息后，更新时，银卡成员(member)卡将被设置为空，金卡成员(member)卡值将更新到数据库中。

我已尝试如下，但卡在这里。由于它是计算可观察的，因此 ko.observable 将始终相同，并且当值发生变化时不会监听变化。因此，后值始终是初始值。而且我认为我的解决方案方法相当臃肿。

function MemberProfile() {
  var self = this;
  self.SilverMemberCardNo = ko.observable();
  self.GoldMemberCardNo = ko.observable(); 
  self.CardNo = ko.observable();
  self.MemberCategory = ko.computed(function() {
      if(self.SilverMemberCardNo() != null) {
        return "0";
      else if(self.GoldMemberCardNo() != null) {
        return "1";
      }
  });
   self.CardNo = ko.computed(function() {
      if(self.SilverMemberCardNo() != null) {
        return self.SilverMemberCardNo();
      else if(self.GoldMemberCardNo() != null) {
        return self.GoldMemberCardNo();
      }
  });
  
  self.GetMemberProfile() = function() {
    $.ajax({
      dataType: 'json',
      type: 'GET',
      url: ...,
      success: {
          ko.mapping.fromJS(data, {}, self);
      }
    })
  }
  
  self.UpdateMemberProfile() = function() {
    if(self.MemberCategory == "0") {
      self.SilverMemberCardNo(self.CardNo);
      self.GoldMemberCardNo(null)
    }
    else if (self.MemberCategory == "1") {
       self.SilverMemberCardNo(null);
       self.GoldMemberCardNo(self.CardNo)
    }
    $.ajax({
      dataType: 'json',
      type: 'PUT',
      url: ...,
      data: {
           SilverMemberCardNo: self.SilverMemberCardNo,
           GoldMemberCardNo: self.GoldMemberCardNo
           ......
      }
  }
}

ko.applyBindings(new MemberProfile());

// Data return from JSON
{
  "SilverMemberCardNo": null
  "GoldMemberCardNo": "123456789"
  ....
  ....
  ....
}

<select>
  <option value="0" text="Silver Member" data-bind="value:MemberCategory"></option>
  <option value="1" text="Gold Member" data-bind="value:MemberCategory"></option>
</select>

<input type="text" data-bind="CardNo" />

Answer 1

您可以将 MemberCategory 设为一个简单的可观察对象，并使用 self.GetMemberProfile() 成功事件函数中的逻辑设置其值。

function MemberProfile() {
  var self = this;

  self.CardNo = ko.observable();
  self.MemberCategory = ko.observable();

  self.GetMemberProfile() = function() {
    $.ajax({
      dataType: 'json',
      type: 'GET',
      url: ...,
      success: {
          ko.mapping.fromJS(data, {}, self);

          if (self.SilverMemberCardNo() != null) {
              self.MemberCategory("0");
          } else if (self.GoldMemberCardNo() != null) {
              self.MemberCategory("1");
          }
      }
    })
  }

  self.UpdateMemberProfile() = function() {
    var silverMemberCardNo;
    var goldMemberCardNo;

    if (self.MemberCategory == "0") {
        silverMemberCardNo = self.CardNo();
        goldMemberCardNo = null;
    } else if (self.MemberCategory == "1") {
        silverMemberCardNo = null;
        goldMemberCardNo = self.CardNo();
    }

    $.ajax({
      dataType: 'json',
      type: 'PUT',
      url: ...,
      data: {
           SilverMemberCardNo: silverMemberCardNo,
           GoldMemberCardNo: goldMemberCardNo
      }
  }
}

要考虑的另一件事(您可能无法控制)是，此逻辑在服务器上执行比在客户端上执行更安全。这意味着取出 JavaScript 中的所有逻辑并在服务器上执行。让客户端只需要呈现数据并将其发回。