1

ノックアウトに関する最後のチュートリアルを Typescript で動作させようとしていますが、メール グリッドに入力できないようです。

class WebmailViewModel {

    folders: any;
    chosenFolderId: any;
    chosenFolderData: any;
    public event_goToFolder: (folder) => void;

    constructor () {

        this.folders = ['Inbox', 'Archive', 'Sent'];

        this.chosenFolderId = ko.observable();
        this.chosenFolderData = ko.observable();

        this.event_goToFolder = ((folder) => {
            this.chosenFolderId(folder);
            $.get('/mail/' + folder + ".txt", { folder: folder }, this.chosenFolderData);
            // send JSON result to DIV
            $("div#jsond").text(JSON.stringify(this.chosenFolderData()));
        });

        // set default folder
        this.event_goToFolder("Inbox");
    }
};

ko.applyBindings(new WebmailViewModel());

そして私の見解：

    <ul class="folders" data-bind="foreach: folders">
        <li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.event_goToFolder"></li>
    </ul>

    <table class="mails" data-bind="with: chosenFolderData">
        <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
        <tbody data-bind="foreach: mails">
            <tr>
                <td data-bind="text: from"></td>(
                <td data-bind="text: to"></td>
                <td data-bind="text: subject"></td>
                <td data-bind="text: date"></td>
            </tr>     
        </tbody>
    </table>
    <div style="border:4px solid blue" data-bind="text: chosenFolderData"></div>
    <div id="jsond" style="border:4px solid black"></div>

アプリを実行すると、DIV #jsond に JSON データが表示されますが、デモから、電子メール グリッドが期待どおりに表示されません。

言及する価値があるのは、何らかの実際の Web API を使用するのではなく、JSON データを含むローカルに保存された TXT ファイルを使用していることです。ただし、JSON データは DIV で問題なく表示されるため、問題はないと思います。

これが私のJSONデータです：

"{\"id\":\"Inbox\",\"mails\":[{\"id\":1,\"from\":\"Abbot <oliver@smoke-stage.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 25, 2011\",\"subject\":\"Booking confirmation #389629244\",\"folder\":\"Inbox\"},{\"id\":2,\"from\":\"Addison Begoat <upton.oprdrusson@pear-income.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 7, 2011\",\"subject\":\"FW: Associate advice\",\"folder\":\"Inbox\"},{\"id\":3,\"from\":\"Allistair <leroy72@plane-railway.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 19, 2011\",\"subject\":\"RE: Phone call tomorrow 5 o'clock\",\"folder\":\"Inbox\"},{\"id\":4,\"from\":\"emmanuel26@ghost.xyz\",\"to\":\"steve@example.com\",\"date\":\"May 22, 2011\",\"subject\":\"Completing basketball project\",\"folder\":\"Inbox\"},{\"id\":5,\"from\":\"jamalia.alnismith1@twigdad.xyz\",\"to\":\"steve@example.com\",\"date\":\"Apr 26, 2011\",\"subject\":\"FW: Can you get DE to resubmit accounts?\",\"folder\":\"Inbox\"},{\"id\":6,\"from\":\"lionel.qugy@cribsmoke.xyz\",\"to\":\"steve@example.com\",\"date\":\"May 22, 2011\",\"subject\":\"RE: Catch up at 9:00 to finalise rain spec\",\"folder\":\"Inbox\"},{\"id\":7,\"from\":\"Madison Lalinesson <melinda.gofagy@wing-language2.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 19, 2011\",\"subject\":\"RE: Pencil scenarios\",\"folder\":\"Inbox\"},{\"id\":8,\"from\":\"rajah.nukripyford@cast92.xyz\",\"to\":\"steve@example.com\",\"date\":\"Apr 28, 2011\",\"subject\":\"Flavor benefit gig\",\"folder\":\"Inbox\"},{\"id\":9,\"from\":\"Sandra Juanhison <yoshi.mostaline72@facefruit.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 8, 2011\",\"subject\":\"RE: Apparel5 network is back up\",\"folder\":\"Inbox\"},{\"id\":10,\"from\":\"Sylvester <rose.va@bunpig98.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 1, 2011\",\"subject\":\"Feedback requested by Ayanna Nuyo\",\"folder\":\"Inbox\"},{\"id\":11,\"from\":\"veronica@heart.xyz\",\"to\":\"steve@example.com\",\"date\":\"May 4, 2011\",\"subject\":\"Project Book starting 6pm\",\"folder\":\"Inbox\"},{\"id\":12,\"from\":\"XLN <basia@framehome.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 8, 2011\",\"subject\":\"RE: Remember Whoopi's joke\",\"folder\":\"Inbox\"}]}"

私が受け取る実際のエラー：

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: mails is not defined;
Bindings value: foreach: mails

アップデート：

私はノックアウトサイトからの手紙にほとんどコードに従っています。この時点まで、他のすべてはうまく機能しています... Typescript変換から実際のJSコードを投稿すると役立つかもしれません-

var WebmailViewModel = (function () {
    function WebmailViewModel() {
        var _this = this;
        this.folders = [
            'Inbox', 
            'Archive', 
            'Sent'
        ];
        this.chosenFolderId = ko.observable();
        this.chosenFolderData = ko.observable();
        this.event_goToFolder = (function (folder) {
            _this.chosenFolderId(folder);
            $.get('/mail/' + folder + ".txt", { folder: folder }, this.chosenFolderData);
        });
        this.event_goToFolder("Inbox");
    }
    return WebmailViewModel;
})();    
; ;
ko.applyBindings(new WebmailViewModel());
4

1 に答える 1