Question

我有问题。我使用带有knockout.js的durandal模板。当我尝试将视图模型中的数据传递给视图时，没有任何反应。我看到永久装载。

这是我的观点模型：

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

当我像这样编辑 viewmodel 时：

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

durandal与淘汰赛无法正常工作

2 个答案: