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

Posted 2023-03-27

【中文标题】淘汰赛确定下拉列表选择并将文本更新到数据库

【英文标题】：Knockout Determining dropdownlist selection and update text to database

【发布时间】：2015-11-30 22:31:11

【问题描述】：

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

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

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

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

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

我尝试了以下但卡在这里。由于它是计算可观察的，因此 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" />

【参考方案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 中取出所有这些逻辑并在服务器上执行。让客户端只呈现数据并将其发回。

【讨论】：

+1 表示that this logic would be more secure to execute on the server。它也会更简单，并且在初始页面加载而不是 AJAX 调用时可用。