Question

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

事情如下：数据库表包含GoldMemberCardNo和SilverMemberCardNo，其中一次只填充其中一个（另一个为null）。

我需要根据它是否为null来确定该成员是GoldMemberCardHolder还是SilverMemberCardHolder并将正确的成员（成员类别和金/银卡号）绑定到初始页面加载时的下拉列表和文本输入。 我能够区分会员是金会员还是银会员的唯一方式是看看CardNo是否为特定会员填写

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

假设用户以前是银卡会员持卡人，现在需要更换为金卡会员卡持卡人。管理员填写所需信息后，更新时，银卡会员卡将被设置为空，金会员卡值将更新为数据库。

我试过以下但是被困在这里。由于它是可观察的计算，因此ko.observable将始终相同，并且在值更改时不会侦听更改。因此，值post始终是初始值。我认为我对这个解决方案的态度非常臃肿。

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中取出所有逻辑并在服务器上执行。让客户只提供数据并将其发回。

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

1 个答案: