CODEWITHSUNDEEP
javascriptknockout.jsdurandal
backtrack
backtrack

Reputation: 8144

Knockout obsevablearry not binding

define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {

    return {
        displayName: 'Flickr',

        Value: ko.observableArray([]),

        js : $.getJSON("http://localhost:XXXXX/api/File/Get", function (result) {

            self = this;
            self.Value = result;
            console.log(JSON.stringify(self.Value));
//[{"ID":1,"Name":"a","Type":"text","Size":123},{"ID":1,"Name":"a","Type":"text","Size":123},{"ID":1,"Name":"a","Type":"text","Size":123}]

        }),

i have the above code in my Drundal SPA application (flick.js) and my (flick.html) has the following code 

<ul class="thumbnails" data-bind="foreach: Value">
            <li data-bind=" text: Name ">

            </li>
        </ul>

but when i execute this code im not getting the list of name in my html file

what went wrong can anyone help me

Upvotes: 1

Views: 111

Answers (2)

Damien
Damien

Reputation: 8987

You have to set the Value observable, not recreate it. You could also create an object that keeps the 'self' reference.

define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
    var VM = function () {
        self = this;
        self.displayName = 'Flickr';
        self.Value = ko.observableArray([]);
        self.js = $.getJSON("http://localhost:XXXXX/api/File/Get", function (result) {
            self.Value(result);
        });
    };
    return new VM();
}),

I hope it helps.

Upvotes: 1

Artem Vyshniakov
Artem Vyshniakov

Reputation: 16465

You have two problems here. The first - you assign value to observableArray incorrectly, observableArray is a function, so you have to use () to assign value to it. The second you have wrong context in self. Move initialization of self to the top of js function:

define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {

    return {
        displayName: 'Flickr',

        Value: ko.observableArray([]),

        js : function() {
              var self = this;
              $.getJSON("http://localhost:XXXXX/api/File/Get", function (result) {

                  self.Value(result);
                 console.log(JSON.stringify(self.Value()));
              })
        }}

Upvotes: 2

Related Questions