knockout.js - 淘汰赛的杜兰达尔不起作用

Question

我有个问题。我将 durandal 模板与 knockout.js 一起使用。当我尝试将数据从我的视图模型传递到视图时，没有任何反应。我看到永久加载。

那是我的视图模型：

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;
            }
        };

    });

和我的观点：

<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>

怎么了？

Answer 1

当我像这样编辑我的视图模型时：

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
        };
    });

并像这样查看：

<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>

它工作得很好！=)

Answer 2

编辑：

尝试

    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;
        }
    };