0

データ ビューモデルのノックアウト コードを表示できる MVC 4 シングル ページ アプリケーションがあります。ビューで foreach を実行すると、ループを通過するたびにドットが表示されますが、データが表示されません。監視可能な配列に 50 個の要素があるように見えますが、それぞれにデータはありません。それでも、getJson 呼び出しを実行すると、データが json 形式で表示されます。なにが問題ですか？

これが私のcaapproval.htmlビューコードです-

<section>
    <h2 class="page-title" data-bind="text: title"></h2>

<br /> <br /> <br />

<ul data-bind="foreach: allCertificates">
    <li>
        <span data-bind="text: UserName"></span>
        <span data-bind="text: StatusCode"></span>
    </li>
</ul>

</section>

私の caapproval.js ビューモデル コード -

define(['services/logger'], function (logger) {
    var Certificate = function (ClientID, RequestDate, UserName,                                                 StatusDescription, StatusCode,     StatusDesc, CEOUserName ) {
    var self = this;
    self.ClientID = ko.observable(ClientID);
    self.RequestDate = ko.observable(RequestDate);
    self.UserName = ko.observable(UserName);
    self.StatusDescription = ko.observable(StatusDescription);
    self.StatusCode = ko.observable(StatusCode);
    self.StatusDesc = ko.observable(StatusDesc);
    self.CEOUserName = ko.observable(CEOUserName);
};

var allCertificates = ko.observableArray();

var vm = {
    allCertificates: allCertificates,
    activate: activate,
    title: 'Certificates'
};


return vm;


function getallCertificates() {
    $.getJSON('/api/caapproval', function (data) {

        allCertificates([]);
        var temp = allCertificates();
        data.forEach(function (p) {
            var certificate = new Certificate(p.ClientID,  p.RequestDate, p.UserName, p.StatusDescription, p.StatusCode, p.StatusDesc, p.CEOUserName);
            temp.push(certificate);
        });

        allCertificates.valueHasMutated();
        return allCertificates();
    });

}

//#region Internal Methods
function activate() {
    logger.log('CA Approval View Activated!!', null, 'CA Approval',  true);
    return getallCertificates();
}
//#endregion

});
4

1 に答える 1

0

まず、結果をそのデータの一時的なホルダーではなく、observableArray にプッシュしようとしていると思います。その場合は、コードを次のように調整することをお勧めします-

function getallCertificates() {
    $.getJSON('/api/caapproval', function (data) {

        allCertificates([]);
        data.forEach(function (p) {
            var certificate = new certificateModel(p.ClientID,  p.RequestDate, p.UserName, p.StatusDescription, p.StatusCode, p.StatusDesc, p.CEOUserName);
            allCertificates.push(certificate);
        });
    });
}

([]) を使用して既に observableArray を空に設定しているため、値をそこに戻します。また、値を設定すると Knockout は値が変化したことを認識し、それらを追跡しているため、valueHasMutated を呼び出す必要はありません。

次に、あなたのようにビューモデル内でモデルを定義するつもりはないと思います。モデルの外に出すか、完全に別の JavaScript ファイルに移動します。命名規則を改善するために、証明書の名前を certificateModel に変更することをお勧めします。これにより、これが何かを行う関数ではなく、モデルであることがより明確になります。

define(['services/logger'], function (logger) {

var allCertificates = ko.observableArray();

var vm = {
    allCertificates: allCertificates,
    activate: activate,
    title: 'Certificates'
};

return vm;

});

var certificateModel = function (ClientID, RequestDate, UserName, StatusDescription, StatusCode, StatusDesc, CEOUserName ) {
    var self = this;
    self.ClientID = ko.observable(ClientID);
    self.RequestDate = ko.observable(RequestDate);
    self.UserName = ko.observable(UserName);
    self.StatusDescription = ko.observable(StatusDescription);
    self.StatusCode = ko.observable(StatusCode);
    self.StatusDesc = ko.observable(StatusDesc);
    self.CEOUserName = ko.observable(CEOUserName);
};

これは多かれ少なかれあなたがやろうとしていることを示すjsFiddleです。jsFiddle は Durandal ビューモデル構成をサポートしていないため、少し変更する必要がありましたが、基本的な機能はそこにあります。

http://jsfiddle.net/DwHXR/2/

于 2013-07-02T18:09:18.353 に答える