How do I automate extending Knockout observables from entities returned by Breeze query?

1
votes

I am using Konckout, Breeze JS, Durandal JS, ASP.NET Web API but my question is specific to Breeze and Knockout.

How do I automate extending Knockout observables from entities returned by Breeze query?

I have a list of Customers being returned via Breeze and they have DB specific fields which I would like to make presentable. In particular I want:

  • UTC timestamps (e.g. "2011-07-02 13:20:13.8061582 +00:00") to show as local date & time (e.g. "July 2, 2011 1:20 PM")
  • Decimal amounts (e.g. "2500.12") to be formatted as currency (e.g. "$2500.12")
  • Add specific css class based on status (e.g. is Status="Available", add cssStatus="item-available")

From what I have read (please let me know if I am wrong), the way to do this is not to use custom bindings anymore but to extend KO observables using .extend() function.

My dataservice.js has following Breeze query that accepts observable and sets it to data results.

// -- snip --
        function getCustomers(koCustomers) {
            var query = breeze.EntityQuery
                .from('Customers');

            return manager.executeQuery(query)
                .then(querySucceeded)
                .fail(queryFailed);

            function querySucceeded(data) {
                koCustomers([]);
                koCustomers(data.results);
            }
        }
// -- snip --

For reference here is my viewmdel as well

define(['durandal/app',
        'durandal/system',
        'durandal/plugins/router',
        'services/config',
        'services/logger',
        'services/datacontext'],
    function (app, system, router, config, logger, datacontext) {
        'use strict';
    var customers = ko.observableArray();

    var viewModel = {
        title: 'Vehicles',
        activate: activate,
        customers: customers
    };
    return viewModel;

    function activate() {
        return datacontext.getCustomers(customers);
    }
});

I am thinking I need some sort of mapping function that would accept observable and data.results and then loop through each result and expand it... Any example would be appreciated...

2
javascriptknockout.jsasp.net-web-apibreezedurandal
Also look at 7704268 formatting rules for numbers...several ways to go about formatting. As for css - <div data-bind="css: { item-available: isAvailable }"></div> - Jim Stott
@user1168541 thanks - for css I need to apply different css styles based on different statuses (status can be Available, Pending, Delivered, etc,etc) not just isAvailable... - zam6ak

2 Answers

1
votes

If it is just formatting then custom binding is simpler and more maintainable. If you need to extend the model, then when you get it from the server just apply transformations so that every entity has what you need. E.g.:

var entities = getEntitiesFromTheServer();

$.each(entities, function(i, entity){
    entity.formattedCurrency = ko.computed(function (){
        return '$' + entity.amount;
    });
});

This way you can bind it:

<span data-bind="text: formattedCurrency"></span>
0
votes

also push() can be used for extending observableArray

like this:

   function getCustomers(koCustomers) {
        var query = breeze.EntityQuery
            .from('Customers');

        return manager.executeQuery(query)
            .then(querySucceeded)
            .fail(queryFailed);

        function querySucceeded(data) {
            koCustomers([]);
            var temp =ko.observable();
var p =ko.observableArray();
p(data.results).
var len= p().length();
var i;

for(i=0; i<len; i++)
{
temp(p()[i].amount())
var q=ko.computed(function(){
return {amount: '$' + temp()} ;
koCustomer().push(q);
});
}
}
}

for date format use custom binding of dateString

link: http://www.aaronkjackson.com/2012/04/formatting-dates-with-knockoutjs/

hope it helped you