Trap value in Knockout.js [Answered]RSS

• • Reply
  chilluk

  Member

  404 Points

  500 Posts

  Trap value in Knockout.js

  Oct 24, 2016 03:53 PM|chilluk|LINK

  On my MVC view I have a series of divs that represent choices of saved addresses - this is populated and controlled by some Knockout.js code :

  <script type='text/javascript'>
      $(document).ready(function() {
  
          function Address(id, ref, name, company, add1, add2, town, county, postcode, country, selected) {
              var self = this;
              self.addressId = ko.observable(id);
              self.addressRef = ko.observable(ref);
              self.addressName = ko.observable(name);
              self.addressCompany = ko.observable(company);
              self.addressAdd1 = ko.observable(add1);
              self.addressAdd2 = ko.observable(add2);
              self.addressTown = ko.observable(town);
              self.addressCounty = ko.observable(county);
              self.addressPostcode = ko.observable(postcode);
              self.addressCountry = ko.observable(country);
              self.AmISelected = ko.computed(function () {
                  return selected() === self;
              });
          }
  
          function AddressViewModel() {
  
              var self = this;
              self.BillSelected = ko.observableArray();
  
              self.BillAddresses = ko.observableArray([
                @foreach (var add in Model.Addresses)
                {
                  <text>
                  new Address(@add.ID, "@add.AddressRef", "@Html.Raw(add.Firstname + ' ' + @add.Lastname)", "@add.Company", "@add.Address1", "@add.Address2", "@add.Town", "@add.County", "@add.Postcode", "@add.Country", self.BillSelected),
                  </text>
                }
                new Address(0, "NEW", "Add a new billing address", "", "", "", "", "", "", "", self.BillSelected)
              ]);
  
              self.SelectBillAddress = function (address) {
                  self.BillSelected(address);
              }
  
              // pre select first option
              self.SelectBillAddress(this.BillAddresses()[0]);
  
          }
  
          ko.applyBindings(new AddressViewModel());
      })
  </script>
  

      if (Model.Addresses.Count() > 0)
      {
      <h3>Select a Billing Address</h3>
      <div class="checkout-wrapper">
          <div data-bind="foreach: BillAddresses">
              <div data-bind="css: { selected: AmISelected }" class="add">
                  <p data-bind="text: addressRef" style="font-weight:bold;"></p>
                  <p data-bind="text: addressName"></p>
                  <p data-bind="text: addressCompany"></p>
                  <p data-bind="text: addressAdd1"></p>
                  <p data-bind="text: addressAdd2"></p>
                  <p data-bind="text: addressTown"></p>
                  <p data-bind="text: addressCounty"></p>
                  <p data-bind="text: addressPostcode"></p>
                  <p data-bind="text: addressCountry"></p>
                  <button data-bind="click: $parent.SelectBillAddress" class="button default">Select this address</button>
              </div>
          </div>
      </div>
      }
  
      <div data-bind="with: BillSelected">
          @Html.HiddenFor(m => m.BillingAddressId, new { data_bind = "value: addressId" })
      </div>
  
  

  What I need to be able to do is when the user clicks on the Div that is created for the option I manually add for the new address (the line of code below) :
  

  new Address(0, "NEW", "Add a new billing address", "", "", "", "", "", "", "", self.BillSelected),

  Is trap the addressId == 0 and react to that and run some other javascript code to toggle the visibility of another div - I can't seem to trap the value of the selected address though - I have tried :

              self.SelectBillAddress = function (address) {
                  self.BillSelected(address);
                  alert(self.BillSelected[0]);
                  alert(address[0]);
              }
  

  I just can't seem to trap which address it is they are clicking on to then be able to react to it?

• • Reply
  chilluk

  Member

  404 Points

  500 Posts

  Re: Trap value in Knockout.js

  Oct 25, 2016 10:24 AM|chilluk|LINK

  Solved it:

  self.SelectBillAddress = function (address) {
      self.BillSelected(address);
      //solved issue below!
      var addId = self.BillSelected().addressId();
      if (addId == 0)
      {
          //do something
      }
  }