Formatting using knockout JS

[paulam...@gmail.com]

Hi I am getting  the below response

{"response":[{"state":"FL","city":"ABCDEF","zip":"12345","csnumber":"ABCDEF","phone1":"5617191807","siteAddr1":"100 Test ROAD","siteAddr2":"","customerNumber":12345,"systemNumber":24562296,"customerName":"PULSE DEMO","siteNumber":21356462}],"status":0,"msg":"OK"}

The response is an array. I am directly mapping it to an observable and in html looping through it using ko:for each.

I need to format the phone number and display as (561)719-1807. Is there any way i can do this formatting using knockout ? Below is the code snippet for mapping and looping through the observable variable.

JS Mapping

self.allSearchResults = ko.mapping.fromJS([]);

.......

ko.mapping.fromJS(data['response'], self.allSearchResults);    // Response got from the server

HTML

 <!-- ko foreach: allSearchResults -->

            <a class="result"  data-bind="click: VM.DeviceDetails">

                <dl class="clearfix">

                    <!-- ko if: csnumber -->

                    <dt><span >CS #</span></dt>

                    <dd><b><span data-bind="text: csnumber"></span></b><br /><br /></dd>

                    <!-- /ko -->

                    <!-- ko if: customerName -->

                    <dt><span class="label">Name</span></dt>

                    <dd><b data-bind="text: customerName().toLowerCase()"></b></dd>

                    <!-- /ko -->

                    <!-- ko if: siteAddr1() -->

                    <dt><span class="label">Addr1</span></dt>

                    <dd><span data-bind="text: siteAddr1().toLowerCase()"></span></dd>

                    <!-- /ko -->

                    <!-- ko if: siteAddr2() -->

                    <dt><span class="label">Addr2</span></dt>

                    <dd><span data-bind="text: siteAddr2().toLowerCase()"></span></dd>

                    <!-- /ko -->

                    <!-- ko if: city() -->

                    <dt><span class="label">&nbsp;</span></dt>

                    <dd>

                        <span data-bind="text: city().toLowerCase()"></span>

                        <span>,</span>

                        <span data-bind="text: state().toUpperCase()"></span>

                        <span>,</span>

                        <span data-bind="text: zip().toLowerCase()">&nbsp;</span>

                    </dd>

                    <!-- /ko -->

                    <!-- ko if: phone1() -->

                    <dt><span class="label">Phone</span></dt>

                    <dd><span data-bind="text: phone1"></span></dd>

                    <!-- /ko -->

                    <!-- ko if: systemNumber() -->

                    <dt><span class="label">System</span></dt>

                    <dd><span data-bind="text: systemNumber()"></span></dd>

                    <!-- /ko -->

                    <!-- ko if: siteNumber() -->

                    <dt><span class="label">Site</span></dt>

                    <dd><span data-bind="text: siteNumber()"></span></dd>

                    <!-- /ko -->

                </dl>

            </a>

            <!-- /ko -->

Pleasae note our target browser is IE8

Any suggession or input is highly appreciated.

Thanks

[Steve Gordon]

Perhaps define a computed property that formats the phone number and bind to the computed?

[david...@bytesurgery.com]

A like to use custom binding handlers for this kind of thing because:

• They don't require you to change your view model (which seems desirable here)
• You can reuse them in your code (useful if you want the numbers formatted in multiple places)

Here's a jsFiddle example that demos this:

http://jsfiddle.net/daviddoran/Hka2B/

Be warned: The code to actually format the number is very crude. You should write it yourself to handle whatever may appear in your phone1 field.

David

[paulam...@gmail.com]

Thanks a lot David this is what exactly i was looking for.

Paulam