Question

我正在努力让关于淘汰赛的最后一个教程与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数据，但电子邮件网格没有按预期显示在演示中。

值得一提的是，我正在使用本地存储的TXT文件，其中包含JSON数据 - 而不是使用某种实际的Web api。但是，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());

Answer 1

您似乎没有将this.chosenFolderData视为可观察对象，您是不是只是使用从获取查询返回的JSON覆盖它？如果将其更改为：

会发生什么

$.get('/mail/' + folder + ".txt", { folder: folder }, function(data)
{
    this.chosenFolderData = ko.mapping.fromJS(data);
});

这使用Knockout mapping plugin

使用Typescript进行淘汰的Webmail演示

1 个答案: