Correct KO binding to access objects within an array?

Question

I've got the following code and I believe the ViewModel is structured correctly (I could be wrong) but I can't seem to access the values properly.

The JavaScript Pieces

NOTE: I'm using the Hot Towel SPA template with DurandalJS and  style binding but I'm not showing that here to keep it simple.

var vm = {
    activate: activate,
    title: 'People',
    people: [
        new PersonItem('TestFirst', 'TestLast', '[email protected]', '111.111.1111', 'bio here'),
        new PersonItem('TestFirst2', 'TestLast2', '[email protected]', '222.222.2222', 'bio here')

    ],
    mytext: 'Oh Hey There'
};

return vm;

function PersonItem(firstname, lastname, email, phone, shortbio) {
    var firstName = firstname;
    var lastName = lastname;
    var emailAddress = email;
    var phoneNumber = phone;
    var shortBio = shortbio;

    var fullName = function () {
        return firstName + " " + lastName;
    };

    var imagePath = function() {
        return "/Content/images/Bio_" + firstName + "_" + lastName + ".jpg";
    };

    var resumePath = function () {
        return "/Content/Resumes/resume_" + firstName + "_" + lastName + ".pdf";
    };

The Binding I'm Trying

<div data-bind="text: mytext"></div>

<ul data-bind="foreach: people">
    <li data-bind="text: firstName"></li>
</ul>

The Problem

I see a bullet is created, which seems to indicate the collection is being found, but the way I'm trying to access "firstName" doesn't seem to be working correctly.

I see the following (note that the text string is binding so I know knockout is doing its thing):

enter image description here

I know this is likely a simple oversight on my part but I just can't seem to see it and Google has me coming up empty (likely because I'm not sure exactly what to search for).

mind making a jsfiddle? i'm on my iphone and can't right now thanks — abc123
– abc123, Commented Aug 3, 2013 at 17:43

zewa666 · Accepted Answer · 2013-08-03 17:53:44Z

3

In your PersonItem you defined firstName as a private property as of the variable declaration. This indicates that it is only visible inside the Class itself.

Try changing it to

this.firstName = firstname;

also you may wan't to think about using observables, if the values are going to change that would yield.

this.firstName = ko.observable(firstname);

answered Aug 3, 2013 at 17:53

zewa666

2,60319 silver badges20 bronze badges

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

2 Comments

SeanKilleen Over a year ago

Worked like a charm! Knew it was a simple oversight. Thank you!

PW Kad Over a year ago

I would also change your functions inside to computeds so that if the observables change the view is automatically updated

Wojciech Czerniak · Accepted Answer · 2013-08-03 17:56:38Z

0

It's because your firstName is declared as var so it's private variable inside function, and not property of object returned by constructor. Use this.firstName instead var firstName.

Your code working in jsfiddle: http://jsfiddle.net/hC5Hf/

There was missing closing bracket of your function and activate is commented out in vm since it don't exist in your example.

answered Aug 3, 2013 at 17:56

Wojciech Czerniak

1,28812 silver badges17 bronze badges

Collectives™ on Stack Overflow

Correct KO binding to access objects within an array?

The JavaScript Pieces

The Binding I'm Trying

The Problem

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The JavaScript Pieces

The Binding I'm Trying

The Problem

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related