correct way to code an observable object in an observable array using knockout

Question

Below is my view model code

var TopicsViewModel = function() {
var self = this;

var fakeTopicData = [];


self.Topic = function(area, name, link, desc, why) {
    self.area = ko.observable(area ? area : "");
    self.name = ko.observable(name ? name : "");
    self.link = ko.observable(link ? link : "");
    self.desc = ko.observable(desc ? desc : "");
    self.why = ko.observable(why ? why : "");
};


self.createProfile = function () {
    alert("came to create profile");
};

self.editProfile = function () {
    alert("came to edit profile");
};

self.removeProfile = function (profile) {
    alert("came to remove profile");

    self.topicsArr.remove(profile);
};



var refresh = function () {
    fakeTopicData.push(new self.Topic("Functional Prog", "Javascript", "http:\\www.somedummysite.com", "somedesc", "Just because"));
    fakeTopicData.push(new Topic("ASP.NET ", "MVC5", "http:\\www.somedummysite.com", "somedesc2", "Just because2"));


     self.topicsArr(fakeTopicData);
};


self.topicsArr = ko.observableArray([]);
refresh();

  };
  ko.applyBindings(new TopicsViewModel());

Here is my VIEW code

<hr /> 
<hr /> 
@*<input type="button"  class="btn-sm"  value="New Topic" data-bind="click:clickevent" />*@
<table  class="table table-striped table-bordered table-condensed">
    <tr >
        <th>Area</th>
        <th>Name</th>
        <th>Link</th>
         <th>Link</th>
        <th>Description</th>
        <th>Why</th>

    </tr>
    <tbody data-bind="foreach : topicsArr">   
        <tr>
            <td data-bind="text:area"> </td>
            <td class=""><a data-bind="text:name, click:$parent.editProfile"></a></td>                
            <td data-bind="text:link"> </td>
            <td> <input data-bind="text:link"></> </td>
            <td data-bind="text:desc">  </td>
            <td data-bind="text:why" ></td>
            <td><button class="btn btn-mini btn-danger" data-bind="click:$parent.removeProfile">remove</button></td>
        </tr>


    </tbody>
</table>

@* *@

I was hoping that when the user makes a change to the input field the value will be reflected in the model object. But when i run this app I get below error

0x800a139e - JavaScript runtime error: Unable to parse bindings.

Message: ReferenceError: 'area' is undefined;

Could someone please point me to what I am doing wrong here.

Shubh · Accepted Answer · 2013-12-02 04:35:12Z

1

To get your code work, you can add if condition to your HTML. Experts may point out the exact mistake Rekha :).

<tbody data-bind="foreach: topicsArr">
    <!-- ko if: $parent.topicsArr != 'undefined'  -->
    <!-- ko if: $parent.topicsArr.length > 0  -->
    <tr>
        <td data-bind="text: area"></td>
        <td class=""><a data-bind="text: name, click: $parent.editProfile"></a></td>
        <td data-bind="text: link"></td>
        <td>
            <input data-bind="text: link"></> </td>
        <td data-bind="text: desc"></td>
        <td data-bind="text: why"></td>
        <td>
            <button class="btn btn-mini btn-danger" data-bind="click: $parent.removeProfile">remove</button></td>
    </tr>
    <!-- /ko -->
    <!-- /ko -->
</tbody>

Okay, when you look at you TopicsViewModel, you'll see something like below:- enter image description here

So you need $parent to access your elements.

 <tr>
            <td data-bind="text: $parent.area"></td>
            <td class=""><a data-bind="text: name, click: $parent.editProfile"></a></td>
            <td data-bind="text: $parent.link"></td>
            <td>
                <input data-bind="text: $parent.link"></> </td>
            <td data-bind="text: $parent.desc"></td>
            <td data-bind="text: $parent.why"></td>
            <td>
                <button class="btn btn-mini btn-danger" data-bind="click: $parent.removeProfile">remove</button></td>
        </tr>

edited Dec 2, 2013 at 4:35

answered Dec 2, 2013 at 4:23

Shubh

6,7499 gold badges54 silver badges86 bronze badges

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

2 Comments

Rekha Jayaram Over a year ago

Thanks so much. Adding the $parent got me past the error. <td data-bind="text: $parent.link"></td> <td><input data-bind="text: $parent.link"></> </td> I had expected the text value to get updated when I updated the input value as they are bound to the same observable field. This is not happening. On the view I can type in a new value for link and the text value <td> element is not updated

Rekha Jayaram Over a year ago

However I had expected the

Rekha Jayaram · Accepted Answer · 2013-12-07 03:25:31Z

0

I had to have the input data element binding as data-bind="VALUE: .... if the data-bind="text: it will not update the value of the observable . Hopefully this will help someone else who runs into the same issue.

  <td data-bind="text: $parent.link"></td>
  <td><input data-bind="value: $parent.link"></> </td>

answered Dec 7, 2013 at 3:25

Rekha Jayaram

1311 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

correct way to code an observable object in an observable array using knockout

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related