0

我正在学习淘汰赛，我正在尝试在处理电子邮件的简单教程中添加上一个和下一个按钮。以下是代码和html。我正在使用 Sammy 解析来自 learn.knockoutjs.com 的一些邮件数据

<script src="/scripts/lib/sammy.js" type="text/javascript"></script>
<!-- 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>
<div class="viewMail" data-bind="with: chosenMailData">
    <div>
        <button id="Prev" value="Prev" style="float:left;margin:5px 20px;" data-bind="visible: $root.checkPrev, click: $root.goToPrev">Previous</button>
        <button id="Next" value="Next" style="float:right;margin:5px 20px;" data-bind="visible: $root.checkNext, click: $root.goToNext">Next</button>
    </div>
    <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>

和淘汰赛

function WebmailViewModel() {
    // Data
var self = this;

self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable();
self.chosenFolderData = ko.observable();
self.chosenMailData = ko.observable();
self.chosenMailId = ko.observable();
self.goToPrev = ko.observable();
self.goToNext = ko.observable();

self.checkPrev = ko.computed(function(){
  if (self.chosenMailId== 1){
    return false
  }else{
     return true
  }
});

self.checkNext = ko.computed(function(){return true});

self.goToFolder = function(folder) {
  location.hash = folder
};

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

self.goToPrev = function(mail) { 
  location.hash = mail.folder + '/' +
    (mail.id.valueOf() - 1).toString();
  self.mailid = mail.id.valueOf()-1;
};
self.goToNext = function(mail) { 
  location.hash = mail.folder + '/' +
      (mail.id.valueOf() + 1).toString() ;
  self.mailid = mail.id.valueOf()+1;
};

Sammy(function() {
    this.get('#:folder', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenMailData(null);
        self.chosenMailId(null)
        $.get("/mail", {folder: this.params.folder },
           self.chosenFolderData);
    });

    this.get('#:folder/:mailId', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenFolderData(null);
        self.chosenMailId= this.params.mailId.valueOf();
        //alert(self.chosenMailId);
        $.get("/mail", { mailId: this.params.mailId },
            self.chosenMailData);
    });

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

ko.applyBindings(new WebmailViewModel());

我尝试使用 visible: $root.checkPrev 作为上一个按钮的绑定，并使用了关联的 ko.computed 函数。我遇到的问题是我无法在函数中检查 mail.id，所以我找不到方法来判断下一个和/或上一个按钮是否应该可见。我希望我能在函数中看到 self.chosenMailId，但是当我使用计算函数时它没有定义？任何帮助，将不胜感激。

干杯，

4

1 回答 1

0 
    self.chosenMailId= this.params.mailId.valueOf();
    //alert(self.chosenMailId);

在这里，您正在替换您的 observable 而不是设置它，结果chosenMailID不再是 observable；alert将给出正确的值，但您的绑定仍将查看曾经存在且不会更新的可观察对象。显示实际值而不是“功能......”的事实alert应该已经提醒（呵呵）你这个问题。

于 2013-10-25T20:34:24.610 回答