3

这是我的代码，我正在使用淘汰赛 js 创建电子邮件详细信息列表和

在此代码中，我的数据已正确绑定但未显示？我正在尝试实现的内容已成功绑定，但未显示在列表中。

<h1>Emailing</h1>
<link href="~/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/Mailing/webmail.css" rel="stylesheet" />
<link href="~/css/Mailing/coderunner.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css"   href="http://learn.knockoutjs.com/Content/App/coderunner.css">
<link rel="stylesheet" type="text/css" href="http://learn.knockoutjs.com/Content/TutorialSpecific/webmail.css">


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

<!-- Mails grid -->
<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 data-bind="click: $root.goToMail">
            <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>

<!-- Chosen mail -->
<div class="viewMail" data-bind="with: chosenMailData">
    <div class="mailInfo">
        <h1 data-bind="text: subject"></h1>
        <p><label>From</label>: <span data-bind="text: from"></span></p>
        <p><label>To</label>: <span data-bind="text: to"></span></p>
        <p><label>Date</label>: <span data-bind="text: date"></span></p>
    </div>
    <p class="message" data-bind="html: messageContent" />
</div>
</body>

这是我的java脚本。

<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/css/Mailing/sammy.js"></script>
<script src="~/Scripts/knockout-2.2.1.js"></script>
<script src="~/Scripts/sammy.js"></script>
<script type="text/javascript">
    function WebmailViewModel() {
        // Data
        var self = this;
        self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
        self.chosenFolderId = ko.observable();
        self.chosenFolderData = ko.observable();
        self.chosenMailData = ko.observable();

        // Behaviours    
        self.goToFolder = function (folder) { location.hash = folder };
        self.goToMail = function (mail) { location.hash = mail.folder + '/' + mail.id };

        // Client-side routes    
        Sammy(function () {
            this.get('#:folder', function () {
                var folder = this.params.folder;
                self.chosenFolderId(folder);
                self.chosenMailData(null);

                $.ajax({
                    type: 'POST',
                    url: '/echo/json/',
                    data: {
                        json: JSON.stringify({ folder: folder }),
                        delay: 0
                    },
                    success: function (data) {
                        self.chosenFolderData({ mails: fakeData[folder] });
                    }
                });
            });

            this.get('#:folder/:mailId', function () {
                var folder = this.params.folder,
                    mailId = this.params.mailId;

                self.chosenFolderId(folder);
                self.chosenFolderData(null);

                $.ajax({
                    type: 'POST',
                    url: '/echo/json/',
                    data: {
                        json: JSON.stringify({ mailId: mailId }),
                        delay: 0
                    },
                    success: function (data) {
                        self.chosenMailData(ko.utils.arrayFirst(fakeData[folder], function (item) {
                            return item.id == mailId;
                        }));
                    }
                });
            });

            this.get('', function () { this.app.runRoute('get', '#Inbox') });
        }).run();
    };

    ko.applyBindings(new WebmailViewModel());


    //Fake data for jsFiddle echo AJAX requests
    var fakeData = {};

    fakeData.Inbox =
    [{ "id": 1, "from": "Abbot \u003coliver@smoke-stage.xyz\u003e", "to": "steve@example.com", "date": "May 25, 2011", "subject": "Booking confirmation #389629244", "messageContent": "Hi!\u003cbr/\u003e\u003cbr/\u003eSchwebet und ernsten zu ich träne diesmal schatten ich folgenden erste seh jenem und irrt was menge dunst herauf. Jenem meinem die mich bang jenem den lebens das busen verklungen fühlt folgenden. Stunden folgenden um nach widerklang strenge ein welt ich euch alten der um nun erfreuet gedränge. Festzuhalten bilder mich ihr jenem mit verklungen auf euch wird selbst des noch weich an des. Tränen um sehnen gleich das stunden irrt einst ertönt besitze ein und liebe wohl noch manche und hinweggeschwunden ertönt.\u003cbr/\u003e\u003cbr/\u003eLied lieb zauberhauch erste die steigen fühlt mich liebe halbverklungnen zu selbst liebe glück. Mir es fühlt hinweggeschwunden schwebet nun euch glück auf irrt neu weiten fühlt und jenem bringt lebens versuch. Erste folgenden ich walten wird euren sang nicht lebt mit es steigt widerklang tönen nun busen.\u003cbr/\u003e\u003cbr/\u003eGesänge zu nun hinweggeschwunden vom mich fühlt träne blick kommt zu. Um wohl es freundliche denen geneigt wird. Menge hören zauberhauch vom ertönt wiederholt mich die nicht jenem euch ein.\u003cbr/\u003e\u003cbr/\u003eWiderklang der lebens der zug träne selbst sich bilder alten strenge zerstoben zauberhauch die um. Ertönt versuch erfreuet und. Ein wieder zerstreuet zerstoben folgt ich herzen der kommt ihr mein sich ersten gedränge.\u003cbr/\u003e\u003cbr/\u003eBest regards - Jonas", "folder": "Inbox" },{ "id": 12, "from": "XLN \u003cbasia@framehome.xyz\u003e", "to": "steve@example.com", "date": "May 8, 2011", "subject": "RE: Remember Whoopi\u0027s joke", "messageContent": "Hi Buffy...\u003cbr/\u003eFathers to day through womans not but his start. Himnot loathed in could upon preSent concubines apart childe he loathed minstrels power caught begun suffice happy time olden. Bade and fellow taste where disappointed degree ofttimes.\u003cbr/\u003e\u003cbr/\u003eHis dome long native mothernot sister deem soul holy had at. One fondly wandered full een the ah chaste strength of glee say high since now but. Her in in her sacred once for known aisle yet of in so.\u003cbr/\u003e\u003cbr/\u003eOlden lurked in from companie soon vulgar coffined he not glorious these name bliss strange.\u003cbr/\u003e\u003cbr/\u003eThanks - Quynn", "folder": "Inbox" }];


    fakeData.Archive =
    [{ "id": 13, "from": "adele.guyuson@hat-chicken6.xyz", "to": "steve@example.com", "date": "May 2, 2011", "subject": "RE: Reservation confirmation #999331516", "messageContent": "Hi Laith,\u003cbr/\u003eAt et eros.\u003cbr/\u003e\u003cbr/\u003eEu no dolore et ea vero dolore luptatum tempor sit ipsum labore dolor elitr. Eirmod clita facilisis et velit justo eos eos. Dolor gubergren vero rebum elitr sit sit ipsum ut no rebum et.\u003cbr/\u003e\u003cbr/\u003eExerci diam ut vel ut. Dolor stet amet volutpat autem invidunt duis et enim vel ipsum eirmod sadipscing dolore sadipscing.\u003cbr/\u003e\u003cbr/\u003eCheers - Ori Hupe", "folder": "Archive" },  { "id": 32, "from": "zenia.dayson@pail-apparel8.xyz", "to": "steve@example.com", "date": "May 11, 2011", "subject": "RE: Reviewing VHD demo", "messageContent": "Hey...\u003cbr/\u003e\u003cbr/\u003eElitr sed eirmod takimata elitr diam magna eirmod feugiat diam option dolores praeSent qui consetetur sed.\u003cbr/\u003e\u003cbr/\u003eBye\u003cbr/\u003eBlossom", "folder": "Archive" }];

    fakeData.Sent =
    [{ "id": 33, "from": "steve@example.com", "to": "callum.wyeslyfa@fang ghost.xyz", "date": "May 13, 2011", "subject": "RE: Logo ideas", "messageContent": "Jada!\u003cbr/\u003e\u003cbr/\u003eNavrantes l\u0027alcool je sans hippocampes des. Et circulation a soir cotons lâche ont marais les et - ma papillon sur les troupeaux inouies victimes. Poteaux navrantes coup de suivi les que tendus tapages les lune ce aux l\u0027autre.\u003cbr/\u003e\u003cbr/\u003eDélires les - verte sans bas ventouses sais lunules dans aux poissons d\u0027azur choient des les la. Tempete rouleurs des. Le enfant criards a.\u003cbr/\u003e\u003cbr/\u003eCataractant faisaient parfois tu mais bleues démarrées j\u0027ai montant et verts. Vu houle le fermenter dans sous hanses bonaces je l\u0027ouragan je sapin quelque et bateau. Sapin noire quille nuits ses délirants triomphants milieu pénétra des serpents et fientes victimes des enfants léviathan. Entonnoirs moi chanteurs instants libre tristesses ce. Ces regrette que que arbres me future plus.\u003cbr/\u003e\u003cbr/\u003eFlorides monté descendre péninsules nasses soir. J\u0027ai d\u0027oiseaux arcs-en-ciel papillon. Faisaient anses de bateau aux les bleme des mes d\u0027astres ne des j\u0027ai l\u0027amour courants mes des. Hideux toute jaune mer du j\u0027ai sans. Colombes maries ressacs en ces.\u003cbr/\u003e\u003cbr/\u003eThat\u0027s all - Marny Humoford", "folder": "Sent" }, { "id": 43, "from": "steve@example.com", "to": "Roanna \u003celizabeth.griwasi36@railwayjuice.xyz\u003e", "date": "Apr 27, 2011", "subject": "Operation Horse ending 8pm", "messageContent": "Hello!\u003cbr/\u003eSit gubergren justo sadipscing. Gubergren dolor amet gubergren. Dolore stet diam euismod at duo sit veniam aliquyam lorem hendrerit eros ut dolor vero tempor est ea stet.\u003cbr/\u003e\u003cbr/\u003eDiam duo id tempor ipsum commodo et rebum kasd kasd magna iriure dolore ad. Ex takimata amet dolor tincidunt dolor elitr ut autem et dignissim ut blandit dolores nulla est no sit.\u003cbr/\u003e\u003cbr/\u003eBest wishes\u003cbr/\u003eAileen Yanifasson", "folder": "Sent" }];

    fakeData.Spam =
    [{ "id": 44, "from": "Vance \u003csigne64@wilderness.xyz\u003e", "to": "steve@example.com", "date": "May 4, 2011", "subject": "@@ Meet new friends online @@", "messageContent": "Hello...\u003cbr/\u003e\u003cbr/\u003eFond querelles léger guidé. Sidéraux flots je dans subi. D\u0027eau plein dors je navrantes cloués dont j\u0027ai du l\u0027orgueil criards geindre et. Amer aubes folle cloués délirants. Des crépuscule du île fermentent et d\u0027eau trombes aux lieues l\u0027horizon est ces presque je des fleurs ameres les.\u003cbr/\u003e\u003cbr/\u003eCheers\u003cbr/\u003eMara Huquford", "folder": "Spam" }, { "id": 59, "from": "zephania.va@crookvolcano55.xyz", "to": "steve@example.com", "date": "May 5, 2011", "subject": "Днепропетровск", "messageContent": "Hey...\u003cbr/\u003ePaso helechos para de estremecidos. Mujer luna vuelve. Muelles la lo se pero tierra ceniza me me yo tierra.\u003cbr/\u003e\u003cbr/\u003eBest regards - Axel Mozysmith", "folder": "Spam" }, { "id": 60, "from": "ZK \u003cjoshua@sun-money.xyz\u003e", "to": "steve@example.com", "date": "May 12, 2011", "subject": "Somebody invited you to join eReaders Community", "messageContent": "Hi...\u003cbr/\u003eDe amor me de hombrecillo quedo sin arroyo quedo. Mudas en sillas pisan paso húmedo en del. Las que quemadas la brooklyn. Sus latido se. Celeste huevos desnudo borrando el cielo a borrachos.\u003cbr/\u003e\u003cbr/\u003eHuevos la tierra ciudades perfil las con los con nino el me comida que ceniza. De y los a el abierta la vengo huido que. Huevos ni bala la desnuda pies el pasan. Por subía ilesa baja el los criaturas piel un los desnudo los tierra. Al veces los las tierra sólo deja los horizonte con y.\u003cbr/\u003e\u003cbr/\u003eDe donde vengo. En en olvidando la. Las brooklyn luna el por tierra el es quedo de que lo la de muerte nadadora la y quemadas.\u003cbr/\u003e\u003cbr/\u003eBest regards - Fallon Xevomosson", "folder": "Spam" }];
</script>
4

1 回答 1

0

好吧，这里有几个开始的地方 - 您似乎试图将一些教程合并为一个，而没有完全理解代码在做什么。我这样说是因为你的 JavaScript 是一团糟，我认为你会更适合理解为什么。

您正在加载两个不同版本的 jQuery。您正在从两个不同的位置加载 Sammy.js - CSS 文件夹（它不属于该文件夹）和您的脚本文件夹（它所在的位置）

其中任何一个都失败了吗？您是否收到任何控制台错误？很可能是的。

于 2013-07-13T15:57:34.817 回答