1

ノックアウト ビューモデル のオブジェクト リテラル内にオブザーバブルが定義されています。今私がアプリケーションを実行したとき.それは観察可能にアクセスすることができません.

$(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");
                }
            }

        });
    }
};
}

クリックイベントをnavigatefunction にバインドしたとき。SelectedFolderundefinedと書かれています。関数SelectedFolder内のオブザーバブルにアクセスできない理由を誰かに教えてもらえますか?navigate

4

2 に答える 2

2

ナビゲート メソッドが実行されていて、SelectedFolder オブザーバブルを探す場合、まず、ナビゲート メソッドのコンテキストでそれを探します。これに失敗すると、ページの準備ができたときに実行される匿名関数である親コンテキストにジャンプします。これに失敗すると、グローバル コンテキストにジャンプします。そこに SelectedFolder が見つからないため、あきらめます。

これを修正するには、ページの準備ができたときに実行される無名関数のコンテキストで使用できる viewModel 変数を参照するように、移動メソッドを変更します。

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

また、成功のコールバックに viewModel への参照を追加して、監視可能なメールを見つけられるようにしたことに注意してください。

これは機能するはずですが、構造を変更して、ナビゲート メソッドが特定のグローバル変数に依存しないようにすることをお勧めします。1 つの方法を次に示します。

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);
});
于 2012-12-21T15:22:23.200 に答える
1

問題はおそらく、メソッドが呼び出されたときの現在のコンテキストです。メソッドがクリック イベントによって呼び出されている場合this、クリック イベントがバインドされたオブジェクトである可能性が高いため、その要素で SelectedFolder メソッドを見つけようとします。

これが最善の方法かどうかはわかりませんが、考えられる解決策の 1 つを次に示します。

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");
      }
    }
});
于 2012-12-21T15:01:04.697 に答える