0

私は問題があります。ノックアウト.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>

どうしたの？

4

2 に答える 2

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>

それは完全に機能しました！=)

于 2013-11-06T13:39:07.400 に答える