Sign up ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I am using KnockoutJS to bind some values. I have a date value TimeByDay that I bind like this:

<span data-bind="text: new Date(TimeByDay)"></span>

But I would also like to transform the date on a different location and simply add a day to the TimeByDay value.

I can do it like this:

<span data-bind="text: new Date(new Date(TimeByDay).setDate(new Date(TimeByDay).getDate() + 1))"></span>

Is there a prettier way to do this? Maybe some feature in KnockoutJS that I am missing?

(The reason I am encapsulating both values in a new Date() construct is that I also apply formatting to the date.)

ViewModel:

$(document).ready(function () {

    var serverData = $.getJSON("../../_api/");
    serverData.done(function (data) {
        ko.applyBindings(new EngagementsList(data.value));
    });

});

function EngagementsList(engagementList) {
    var self = this;
    self.entries = engagementList;
}

HTML:

<span data-bind="foreach: entries">
  <span data-bind="text: new Date(TimeByDay)"></span>
  <span data-bind="text: new Date(new Date(TimeByDay).setDate(new Date(TimeByDay).getDate() + 1))"></span>
</span>
share|improve this question

migrated from stackoverflow.com Sep 18 at 15:32

This question came from our site for professional and enthusiast programmers.

1 Answer 1

up vote 1 down vote accepted

One way would be to move the date display logic to your view model.

function vm(){
    var self= this;

    self.TimeByDay = ko.observable(new Date("December 17, 1995 03:24:00"));

    // fn extention of ko.observable        
    ko.observable.fn.AddOneDay = function(){
        return new Date(this().setDate(this().getDate()+1))
    };

    self.AddOneDay = function(TimeByDay){
        return new Date(TimeByDay().setDate(TimeByDay().getDate()+1))
    };
}

And then in your view you can have

<span data-bind="text: TimeByDay"></span>
<br/>
<span data-bind="text: AddOneDay(TimeByDay)"></span>

Or

<span data-bind="text: TimeByDay.AddOneDay()"></span>

Use the extention fn method if your application requires 1 day added to date frequently. Read this for more.

Jsfiddle: https://jsfiddle.net/newuserjs/oLh6u67z/4/

share|improve this answer
    
Hi @Dandy, the .fn extension point was exactly what I was looking for. So I have added that, but cannot get it to work referencing a property of the items being iterated over. My workaround is to declare a global function (and thereby bypassing konckoutjs), but I'd much rather use the extension point, but I cannot get past the exception "'AddOneDay' is undefined". jsfiddle.net/oLh6u67z/17 . Any thoughts? –  Jesper Lund Stocholm Sep 7 at 9:50
    
@JesperLundStocholm you get 'AddOneDay' is undefined because the 'fn' extention point is only for ko.observables. It wont work for strings or other types. You can convert your data to observable array using knockout-mapping plugin, and then use the 'fn' extention method to your TimeByDay observable. jsfiddle.net/newuserjs/oLh6u67z/19 –  Dandy Sep 7 at 11:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.