locked
Trap value in Knockout.js RRS feed

  • Question

  • User269881539 posted

    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?

    Monday, October 24, 2016 3:53 PM

Answers

  • User269881539 posted

    Solved it:

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 25, 2016 10:24 AM