可觀察的未定義在對象字面值內部knockout

Question

我有一個可觀察的內部定義在挖空視圖模型的對象字面值。現在，當我運行應用程序時，它無法訪問observable。

$(function() { 
    var viewModel = { 
    Folders: ['Inbox', 'Archive', 'Sent', 'Spam'], 
    Title: ko.observable("My View Model Test"), 
    SelectedFolder: ko.observable(), 
    Mails: ko.observableArray(), 
    SelectedMail: ko.observable(), 
    SelectedChoices: ko.observable(false), 


    navigate: function (folder) {   
     SelectedFolder(folder); 
     $.ajax({ 
      url: "/Api/MailBox", 
      data: { folder: folder }, 
      success: function (data) { 
       self.Mails(data); 
      }, 
      statusCode: { 
       404: function() { 
        console.log("No Mails"); 
       } 
      } 

     }); 
    } 
}; 
} 

當我有綁定點擊事件到navigate函數。它說SelectedFolder是未定義的。有人能告訴我爲什麼無法訪問navigate函數中的SelectedFolder可觀察值？

Answer 1

當導航方法運行，它會尋找SelectedFolder觀察到，首先查找它的上下文導航方法。否則，它會跳轉到父上下文，這是在頁面準備就緒時運行的匿名函數。如果失敗了，它會跳轉到全局上下文 - 它不能在那裏找到SelectedFolder，所以它就放棄了。

爲了解決這個問題，改變你的導航方法來引用視圖模型變量，在匿名函數正在運行的情況下可用的頁面時準備：

navigate: function (folder) {   
    viewModel.SelectedFolder(folder); 
    $.ajax({ 
    url: "/Api/MailBox", 
    data: { folder: folder }, 
    success: function (data) { 
     viewModel.Mails(data); 
    }, 
    ... 

請注意，我還添加了一個參考成功回調中的viewModel，以便它可以找到郵件的可見性。

這應該工作，但是，我會建議考慮更改您的結構，以便您的導航方法不依賴於特定的全局變量。這裏是一種方法：

var myViewModel = function() { 
    var self = this; 
    self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam']; 
    self.Title = ko.observable("My View Model Test"); 
    self.SelectedFolder = ko.observable(); 
    self.Mails = ko.observableArray(); 
    self.SelectedMail = ko.observable(); 
    self.SelectedChoices = ko.observable(false); 

    self.navigate = function (folder) {   
     self.SelectedFolder(folder); 
     $.ajax({ 
      url: "/Api/MailBox", 
      data: { folder: folder }, 
      success: function (data) { 
       self.Mails(data); 
      }, 
      statusCode: { 
       404: function() { 
        console.log("No Mails"); 
       } 
      } 

     }); 
    }; 
}; 

$(function() { 
    var ViewModel = new myViewModel(); 
    ko.applyBindings(viewModel); 
}); 

Answer 2

該問題可能是調用方法時的當前上下文。如果通過點擊事件調用該方法，則this可能是click事件綁定的對象，因此它會嘗試在該元素上找到SelectedFolder方法。

不知道這是最好的方式，但這裏是一個可能的解決方案：

var viewModel = { 
    Folders: ['Inbox', 'Archive', 'Sent', 'Spam'], 
    Title: ko.observable("My View Model Test"), 
    SelectedFolder: ko.observable(), 
    Mails: ko.observableArray(), 
    SelectedMail: ko.observable(), 
    SelectedChoices: ko.observable(false) 
}; 

viewModel.navigate = function (folder) {   
    viewModel.SelectedFolder(folder); 
    $.ajax({ 
    url: "/Api/MailBox", 
    data: { folder: folder }, 
    success: function (data) { 
     viewModel.Mails(data); 
    }, 
    statusCode: { 
     404: function() { 
     console.log("No Mails"); 
     } 
    } 
});