Question

我正在使用Knockout订阅功能。我有3个组合框。在我从上一个组合中选择一个记录之前，每个组合都没有数据（第一个组合框除外）。

当我选择它时效果很好。在订阅回调中，它正确地从组合框中给我选择的值。

但是当我点击该行并希望触发相同的回调时，它无法正常工作。

＆＃13;

    function UNVViewModel() {
      var self = this;
      var UNVViewModel = vm;

      self.Continent = ko.observableArray([]);
      self.Countries = ko.observableArray([]);
      self.States = ko.observableArray([]);
      self.AllData = ko.observableArray([]);

      self.concod = ko.observable();
      self.cntrycod = ko.observable();
      self.statcod = ko.observable();

      self.Load = function() {

 $.getJSON('../ProjectAPI/api/Project/Continent', function (data) { self.Continent(JSON.parse(data)); })

 $.getJSON('../ProjectAPI/api/Project/Countries ', function (data) { self.Countries (JSON.parse(data));})
$.getJSON('../ProjectAPI/api/Project/States ', function (data) { self.States (JSON.parse(data));})
      };
        self.AllData = [
          {
            StateName: "Cairo",
            StateCode: 111,
            CountryCode: 11,
            ContinentCode: 1,
            ContinentName: "Africa",
            CountryName: "Egypt"
          },
          {
            StateName: "Oran",
            StateCode: 112,
            CountryCode: 12,
            ContinentCode: 1,
            ContinentName: "Africa",
            CountryName: "Algeria"
          },
          {
            StateName: "Rome",
            StateCode: 121,
            CountryCode: 21,
            ContinentCode: 2,
            ContinentName: "Europe",
            CountryName: "Italy"
          }
        ];


      self.concod.subscribe(function(con) {
        if (con == undefined) {
          return false;
        } else {
          $.getJSON(
            "../ProjectAPI/API/Project/Countries?ContinentCode=" + con, function(data) { self.Countries(JSON.parse(data));}
          ).complete(function() {
            if (self.Clickedconcod() !== undefined) {
              self.concod(self.Clickedconcod());
            }
          });
        }
      });

      self.cntrycod.subscribe(function(cnty) {
        if (cnty == undefined) {
          return false;
        } else {
          $.getJSON(
            "../ProjectAPI/API/Project/States?CountryCode=" +self.cntrycod() +"&ContinentCode=" +self.concod,function(data) {self.States(JSON.parse(data));}
          ).complete(function() {
            if (self.Clickedcntrycod() !== undefined) {
              self.cntrycod(self.Clickedcntrycod());
            }
          });
        }
      });
    }

    var vm;
    $(document).ready(function() {
      vm = new UNVViewModel();
      vm.Load();
      ko.applyBindings(vm);
    });

＆＃13;

<div>
    <select class="styled-select" data-bind="options:Continents,optionsText:'ContinentName', optionsValue:'ContinentCode',optionsCaption:'Select  ', value:concod "></select>

    <select class="styled-select" data-bind="options:Countries,optionsText:'CountryName', optionsValue:'CountryCode',optionsCaption:'Select ', value:cntrycod "></select>

    <select class="styled-select" data-bind="options:States,optionsText:'StateName', optionsValue:'StateCode',optionsCaption:'Select ', value:statcod "></select>

</div>



<table id="myTable">
    <thead>

        <tr>
            <th> Continent Name</th>
            <th> Country Name</th>
            <th> State Name</th>
        </tr>
    </thead>

    <tbody data-bind="foreach:AllData">
        <tr data-bind="click:$parent.CountryClick">

            <td data-bind="text:ContinentName"></td>
            <td data-bind="text:CountryName"></td>
            <td data-bind="text:StateName"></td>

        </tr>
    </tbody>

</table>

＆＃13;

Answer 1

当observable发生更改时，将触发subscribe回调。当您在下拉列表中选择某些内容时，您正在更改这些可观察值，但是不更改行点击中的可观察值。

如果要从下拉选择/ Knockout订阅回调和行单击中调用相同的代码，请将要运行的公共代码提取到单独的函数中并从两个位置调用它。

我已更改下面的代码，以便在选择下拉列表或单击行时添加显示未来XHR调用的警报，注释掉XHR调用，并将公共代码提取到函数中。 / p>

例如，self.refreshConcod是新的公共代码函数。当下拉列表发生变化时，self.concod.subscribe会调用此变量，单击该行时会调用self.CountryClick。

self.refreshConcod = function(con) {
    if (con == undefined) {
      return false;
    } else {
      alert("../ProjectAPI/API/Project/Countries?ContinentCode=" + con);
      //$.getJSON(
      //  "../ProjectAPI/API/Project/Countries?ContinentCode=" + con,
      //  function(data) {
      //    self.Countries(JSON.parse(data));
      //  }
      //);
    }
};
self.concod.subscribe(function(con) {
    self.refreshConcod(con);
});
self.CountryClick = function() {
    self.refreshConcod(this.ContinentCode);
};

＆＃13;

function UNVViewModel() {
  var self = this;
  var GSTViewModel = vm;
  var UNVViewModel = vm;

  self.Continent = ko.observableArray([]);
  self.Countries = ko.observableArray([]);
  self.States = ko.observableArray([]);
  self.AllData = ko.observableArray([]);

  self.concod = ko.observable();
  self.cntrycod = ko.observable();
  self.statcod = ko.observable();

  self.Load = function() {
    self.Continents = [
      { ContinentName: "Africa", ContinentCode: 1 },
      { ContinentName: "Europe", ContinentCode: 2 },
      { ContinentName: "Asia", ContinentCode: 3 }
    ];

    self.Countries = [
      { CountryName: "Egypt", CountryCode: 11, ContinentCode: 1 },
      { CountryName: "Algeria", CountryCode: 12, ContinentCode: 1 },
      { CountryName: "Ghana", CountryCode: 13, ContinentCode: 1 },

      { CountryName: "Italy", CountryCode: 21, ContinentCode: 2 },
      { CountryName: "Denmark", CountryCode: 22, ContinentCode: 2 },
      { CountryName: "France", CountryCode: 23, ContinentCode: 2 },
      { CountryName: "Germany", CountryCode: 24, ContinentCode: 2 },

      { CountryName: "Russia", CountryCode: 31, ContinentCode: 3 },
      { CountryName: "Malaysia", CountryCode: 32, ContinentCode: 3 },
      { CountryName: "China", CountryCode: 33, ContinentCode: 3 },
      { CountryName: "Turkey", CountryCode: 34, ContinentCode: 3 }
    ];

    self.States = [
      { StateName: "Cairo", StateCode: 111, CountryCode: 11, ContinentCode: 1 },
      { StateName: "Alex", StateCode: 211, CountryCode: 11, ContinentCode: 1 },
      { StateName: "Oran", StateCode: 112, CountryCode: 12, ContinentCode: 1 },
      { StateName: "Blida", StateCode: 212, CountryCode: 12, ContinentCode: 1 },
      { StateName: "Accra", StateCode: 113, CountryCode: 13, ContinentCode: 1 },
      {
        StateName: "Kumasi",
        StateCode: 213,
        CountryCode: 13,
        ContinentCode: 1
      },
      { StateName: "	Rome", StateCode: 121, CountryCode: 21, ContinentCode: 2 },
      { StateName: "Milan", StateCode: 221, CountryCode: 21, ContinentCode: 2 },
      {
        StateName: "	Horsens",
        StateCode: 122,
        CountryCode: 22,
        ContinentCode: 2
      },
      {
        StateName: "Roskilde",
        StateCode: 222,
        CountryCode: 22,
        ContinentCode: 2
      },
      { StateName: "	Paris", StateCode: 123, CountryCode: 23, ContinentCode: 2 },
      { StateName: "Lyon	", StateCode: 223, CountryCode: 23, ContinentCode: 2 },
      {
        StateName: "Berlin",
        StateCode: 124,
        CountryCode: 24,
        ContinentCode: 2
      },
      {
        StateName: "Moscow",
        StateCode: 131,
        CountryCode: 31,
        ContinentCode: 3
      },
      {
        StateName: "Saint Petersburg",
        StateCode: 231,
        CountryCode: 31,
        ContinentCode: 3
      },
      {
        StateName: "Novosibirsk",
        StateCode: 331,
        CountryCode: 31,
        ContinentCode: 3
      },
      {
        StateName: "Hong Kong",
        StateCode: 133,
        CountryCode: 33,
        ContinentCode: 3
      },
      {
        StateName: "Beijing",
        StateCode: 233,
        CountryCode: 33,
        ContinentCode: 3
      },
      {
        StateName: "Tianjin",
        StateCode: 333,
        CountryCode: 33,
        ContinentCode: 3
      },
      {
        StateName: "Anqing",
        StateCode: 433,
        CountryCode: 33,
        ContinentCode: 3
      },
      {
        StateName: "	Istanbul",
        StateCode: 134,
        CountryCode: 34,
        ContinentCode: 3
      },
      {
        StateName: "Ankara",
        StateCode: 234,
        CountryCode: 34,
        ContinentCode: 3
      },
      { StateName: "İzmir", StateCode: 334, CountryCode: 34, ContinentCode: 3 },
      { StateName: "Bursa", StateCode: 434, CountryCode: 34, ContinentCode: 3 }
    ];
  };
  self.AllData = [
    {
      StateName: "Cairo",
      StateCode: 111,
      CountryCode: 11,
      ContinentCode: 1,
      ContinentName: "Africa",
      CountryName: "Egypt"
    },
    {
      StateName: "Oran",
      StateCode: 112,
      CountryCode: 12,
      ContinentCode: 1,
      ContinentName: "Africa",
      CountryName: "Algeria"
    },
    {
      StateName: "Rome",
      StateCode: 121,
      CountryCode: 21,
      ContinentCode: 2,
      ContinentName: "Europe",
      CountryName: "Italy"
    }
  ];

  self.refreshConcod = function(con) {
    if (con == undefined) {
      return false;
    } else {
      alert("../ProjectAPI/API/Project/Countries?ContinentCode=" + con);
      //$.getJSON(
      //  "../ProjectAPI/API/Project/Countries?ContinentCode=" + con,
      //  function(data) {
      //    self.Countries(JSON.parse(data));
      //  }
      //);
    }
  };
  self.concod.subscribe(function(con) {
    self.refreshConcod(con);
  });
  self.CountryClick = function() {
    self.refreshConcod(this.ContinentCode);
  };

  self.cntrycod.subscribe(function(cnty) {
    if (cnty == undefined) {
      return false;
    } else {
      alert("../ProjectAPI/API/Project/States?CountryCode=" + cnty + "&ContinentCode=" + self.concod());
      //$.getJSON(
      //  "../ProjectAPI/API/Project/States?CountryCode=" +
      //    cnty +
      //    "&ContinentCode=" +
      //    self.concod(),
      //  function(data) {
      //    self.States(JSON.parse(data));
      //  }
      //);
    }
  });
}

var vm;
$(document).ready(function() {
  vm = new UNVViewModel();
  vm.Load();
  ko.applyBindings(vm);
});

＆＃13;

#myTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#myTable td, #myTable th {
    border: 1px solid #ddd;
    padding: 8px;
}

#myTable tr:nth-child(even){background-color: #f2f2f2;}

#myTable tr:hover {background-color: #ddd;}

#myTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

.styled-select select {
       background: transparent;
       width: 268px;
       padding: 5px;
       font-size: 16px;

       border: 0;
       border-radius: 0;
       height: 34px;
       -webkit-appearance: none;
       -moz-appearance:none;
       appearance: none;
       }

.styled-select {
       width: 271px;
       height: 25px;
       overflow: hidden;
       background: url(img/cmbbox.png) no-repeat;
       border: 0;
       }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="modal-body">
  <div class="row">
    <div class="col-xs-6">
      <div class="form-group has-error">
        <label class="title_lable">Continent Name:</label>
        <select class="styled-select" data-bind="options:Continents,optionsText:'ContinentName', optionsValue:'ContinentCode',optionsCaption:'Select  ', value:concod "></select>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="form-group has-error">
        <label class="title_lable"> Country Name:</label>
        <select class="styled-select" data-bind="options:Countries,optionsText:'CountryName', optionsValue:'CountryCode',optionsCaption:'Select ', value:cntrycod "></select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group has-error">
        <label class="title_lable ">State Name:</label>
        <select class="styled-select" data-bind="options:States,optionsText:'StateName', optionsValue:'StateCode',optionsCaption:'Select ', value:statcod "></select>
      </div>
    </div>
  </div>
</div>

<table id="myTable" class="table table-bordered table-striped " style="font-size:12px;cursor:cell">
  <thead>
    <tr>
      <th> Continent Name</th>
      <th> Country Name</th>
      <th> State Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach:AllData">
    <tr data-bind="click:$parent.CountryClick">
      <td data-bind="text:ContinentName"></td>
      <td data-bind="text:CountryName"></td>
      <td data-bind="text:StateName"></td>
    </tr>
  </tbody>
</table>

＆＃13;

Knockout订阅回调没有被解雇

1 个答案: