Using if statement on data-bind text

Question

I can not quite figure out how to put an if statement inside a text binding.

<tbody data-bind="foreach: model.poCollection">
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td data-bind="text: RlseNbr"></td>
        <td data-bind="text: Clin"></td>
        <td data-bind="text: PrchOrdNbr"></td>
        <td data-bind="text: RqstnCntrlNbr"></td>
        <td data-bind="text: {(DtCntrctDlvry == '0') ? 'a' :'b'}"></td>
    </tr>

Not sure what I am doing wrong the moment I attempt to put the if statement in it the data is no longer displayed.

To expand on @nemesv's comment. If DtCntrctDlvry (crazy name btw) is an observable, then it's never going to equal '0' because observables aren't strings, they're observables. Get the backing value by calling the observable as a function and then compare that with '0'. — CrimsonChris
– CrimsonChris, Commented Aug 28, 2015 at 19:14
@nemevs +1. Another way: text: ko.unwrap(DtCntrctDlvry) == '0' ? 'a' :'b' — TSV
– TSV, Commented Aug 28, 2015 at 19:45
@TSV's approach is preferred when you don't know at runtime if a property is an observable or not. — CrimsonChris
– CrimsonChris, Commented Aug 28, 2015 at 20:39
One more option if you don't want to have to worry about these syntax issues as often. blog.stevensanderson.com/2013/05/20/… — CrimsonChris
– CrimsonChris, Commented Aug 28, 2015 at 20:40

Community · Accepted Answer · 2017-05-23 12:26:04Z

10

You haven't provided enough info, but we can safely assume one of two situations:

Plain properties: DtCntrctDlvry = 0; or
Observables: DtCntrctDlvry = ko.observable(0)

Binding handlers don't care which it is if you do simple bindings, e.g.:

<span data-bind="text: DtCntrctDlvry"></span>

But they do care if you start putting logic in there. Above situations respectively require:

Plain properties:

<span data-bind="text: DtCntrctDlvry === 0 ? 'a' : 'b'"></span>

Observables:

<span data-bind="text: DtCntrctDlvry() === 0 ? 'a' : 'b'"></span>

In any case, please see my answer to another question where I argue that you would be off even better if you wrap the logic inside a computed, e.g.:

var ViewModel = function() {
  var self = this;
  self.DtCntrctDlvry = ko.observable(0);
  self.DtCntrctDlvryText = ko.computed(function() {
    return self.DtCntrctDlvry() === 0 ? "a" : "b";
  });
}

And bind like this:

<span data-bind="text: DtCntrctDlvryText"></span>

PS. Some footnotes:

Do you realize you're using == where you might prefer ===?
Any reason you're writing '0' (zero, but as a string) instead of 0 (as a number)?

In my answer I've assumed the for both cases you meant to use the latter. If not, you may have to tweak my solution for that.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 29, 2015 at 10:55

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leonardo Over a year ago

You can use ko.unwrap to avoid the issue of plain properties and observables

AceMark Over a year ago

this really helped me also! what made it weird is the difference () can make. :D

Jeroen Over a year ago

@AceMark Observables are functions. Called without parameters they are a "getter", called with one parameter they are a "setter". Only in 'simple' bindings can you leave them off because Knockout will infer them.

Collectives™ on Stack Overflow

Using if statement on data-bind text

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related