observableArray is not defined

Question

I am working in a client development environment and have to adhere to their coding standards. I have the following JS and HTML. My observableArray is coming as not defined. I am not able to get it working. Even the console.logs are printing the correct values.

Please don't worry about ko.applyBindings. It is taken care of.

My JS Code:

define(
    ['knockout'],
    function (ko) {
        "use strict";
        return {
            onLoad: function (widget) {
                widget.getDetails= function (prod) {
                    var abc = prod.DetailsNumbers();
                    console.log(abc);
                    var someArray= [];
                    someArray= abc.split(',');
                    //console.log(someArray);
                    var anotherObservableArray = ko.observableArray();

                    for (var i = 0; i < someArray.length; i++) {
                        var temp = {
                            "prodName": ko.observable(someArray[i])
                        };
                        anotherObservableArray.push(temp);
                    }
                    console.log(anotherObservableArray());
                };
            }
        }
    }
);

My HTML Code:

<div id="someId">
    <table>
        <tbody>
            <tr>
                <td>Button Here</td>
                <td><button data-bind="click: getDetails(product())">Click me</button></td> 
            </tr>// this here is working fine
        </tbody>
    </table>
    <ul data-bind="foreach: anotherObservableArray"> // this doesnt work
        <li>
            <span data-bind="text: prodName"> </span>
        </li>
    </ul>
</div>

anotherObservableArray is not defined

@user3297291, it has been taken care of. Added that to the question as well. — user2281858
– user2281858, Commented Apr 5, 2016 at 15:33
I noticed you added it, so I removed my comment. Your question does not really make clear what the binding context of the HTML is. getDetails creates an observable array named anotherObservableArray, but it only exists within the scope of the method. — user3297291
– user3297291, Commented Apr 5, 2016 at 15:35
Does your click handler already work? If it does, that means your current binding context is widget. If you want to make it global, it has to be in the view model you're using inside applyBindings. You can then access it via $root.anotherObservableArray inside your foreach binding. You'll also have to rewrite your getDetails method. Maybe read some more about MVVM and knockout's best practices. Does that help? — user3297291
– user3297291, Commented Apr 5, 2016 at 15:42
yes the click handler works fine. how can I modify the code to make it global scoped? an examples or something you show? — user2281858
– user2281858, Commented Apr 5, 2016 at 15:43

Jeroen · Accepted Answer · 2016-04-05 16:36:01Z

1

You don't expose anotherObservableArray outside the function scope you declare it in. Basically your code is of this format:

{
  onLoad: function (widget) {
    widget.getDetails = function (prod) {
      var anotherObservableArray = ko.observableArray();
      // push some items into the array
      console.log(anotherObservableArray());
    };
  }
}

You somehow need to expose the anotherObservableArray outside the function. For example:

{
  onLoad: function (widget) {
    widget.getDetails = function (prod) {
      var anotherObservableArray = ko.observableArray();
      // push some items into the array
      console.log(anotherObservableArray());
      this.anotherObservableArray = anotherObservableArray; // Expose it on the function
    };
  }
}

answered Apr 5, 2016 at 16:36

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

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

1 Comment

user2281858 Over a year ago

that fixed the issue...however I am facing a new issue. see here stackoverflow.com/questions/36434173/…

G. Stoynev · Accepted Answer · 2016-04-05 16:35:05Z

1

Move var anotherObservableArray = ko.observableArray(); to your VM definition and ensure it's exposed (i.e. "public"). I am imagining you do have something like this:

var vm = {
    // ...
    // most likely you are exposing getDetails() already 
    // .... 

    anotherObservableArray: ko.observableArray()
};

// ...

ko.applyBindings(vm);

answered Apr 5, 2016 at 16:35

G. Stoynev

7,8417 gold badges40 silver badges51 bronze badges

Collectives™ on Stack Overflow

observableArray is not defined

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related