Question

我正在学习淘汰赛，我正在尝试为处理电子邮件的简单教程添加上一个和下一个按钮。以下是代码和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作为Previous按钮的绑定，并使用了相关的ko.computed函数。我遇到的问题是我无法在函数中检查mail.id，所以我找不到一种方法来判断下一个或前一个按钮是否应该可见。我希望我能在函数中看到self.chosenMailId，但是当我使用计算函数时它没有被定义？任何帮助将不胜感激。

欢呼声，

Answer 1

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

在这里你替换你的observable而不是设置，结果chosenMailID不再是一个可观察的; alert将给出正确的值，但是您的绑定仍然会查看以前存在且不会更新的observable。 alert显示实际值而不是“function ...”的事实应该警告（呵呵）你解决问题。

尝试使用knockout添加启用/禁用上一个和下一个按钮

1 个答案: