durandal with knockout not working

Question

I have a problem. I use durandal template with knockout.js. When I trying to pass a data from my viewmodel to the view, nothing happens. I see permanently loading.

That's my viewmodel:

define(['knockout', 'common/urlconfig', 'plugins/http', 'plugins/router', 'common/userService', 'durandal/app'],
    function(ko, urlconfig, http, router, userService, app) {
        "use strict";

        function article(data) {
            this.Id = ko.observable(data.Id);
            this.Description = ko.observable(data.Description);
            this.Author = ko.observable(data.Author);
            this.Tags = ko.observable(data.Tags);
        }
       // ko.applyBindings(appViewArticles);
        return {
            articles: articles,
            displayName: 'Articles viewer',
            showMessage: app.showMessage('it\'s works!'),
            Id: Id,
            Description: Description,
            Author: Author,
            Tags: Tags,

            activate: function () {
                var self = this;
                self.articles = ko.observableArray([]);
                var promise = $.getJSON("/api/article", function (allData) {
                    var mappedArticles = $.map(allData, function (i) { return new article(i) });
                    self.articles(mappedArticles);
                });
                return promise;
            }
        };

    });

and my view:

<div class="container-fluid">
    <div class="row-fluid">
        <h2 data-bind="text: 'Welcome, ' + userName() + '!'"></h2>
    </div>
    <table>
        <thead>
            <tr><td>ID</td><td>Description</td><td>Author</td><td>Tags</td></tr>
        </thead>
        <tbody data-bind="foreach: articles">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Description"></td>
                <td data-bind="text: Author"></td>
                <td data-bind="text: Tags"></td>
            </tr> 
        </tbody>
    </table>
</div>

What's wrong?

Answer 1

When I edit my viewmodel like this:

define(['knockout', 'common/urlconfig', 'plugins/http', 'durandal/app'],
    function (ko, urlconfig, http, app) {
        var articles = ko.observableArray([]);
        http.get(urlconfig.articlesUrl).then(function(data) {
            $.each(data, function(key, item) {
                articles.push(item);
            });
        }).fail(function () {
            app.showMessage('Server error!', 'Error',['OK']);
        });
        return {
            articles: articles
        };
    });

and view like this:

<div class="container-fluid">
    <table>
        <thead>
            <tr><td>ID</td><td>Description</td><td>Author</td><td>Tags</td></tr>
        </thead>
        <tbody data-bind="foreach: articles">
            <tr>
                <td data-bind="text: id"></td>
                <td data-bind="text: description"></td>
                <td data-bind="text: author"></td>
                <td data-bind="text: tags"></td>
            </tr> 
        </tbody>
    </table>
</div>

it worked perfectly! =)

Answer 2

edit:

try

    return {
        articles: ko.observableArray([]),
        displayName: 'Articles viewer',
        showMessage: app.showMessage('it\'s works!'),


        activate: function () {
            var self = this;

            var promise = $.getJSON("/api/article", function (allData) {
                var mappedArticles = $.map(allData, function (i) { return new article(i) });
                self.articles(mappedArticles);
            });
            return promise;
        }
    };