2012-11-10 62 views
0

我試圖在它的訂閱方法中讀取一個observable的值,它總是返回一個對象而不是應該是什麼值(true或false)。無法讀取訂閱方法中的可觀察值

退房小提琴或代碼如下: http://jsfiddle.net/StrandedPirate/WP3s9/

所有我想要的是隻有一個項目在一個observableArray有其isSelected屬性同時設置爲true。如果有另一種方式來做到這一點沒有循環或訂閱讓我知道,但這是我最終。

var menuViewModel = (function() { 
    function _constructor(error, details) { 
     var self = this; 
     self.items = ko.observableArray(); 

     // add the menu items 
     self.items.push(new menuItemModel("Dashboard")); 
     self.items.push(new menuItemModel("Content Management")); 

     self.handleIsSelectedChange = function (item) { 
      // issue: item.isSelected() returns [object Object] instead of true/false 
      console.log("inside subscription function: " + item.title() + ", isSelected: " + item.isSelected()); 

      // this fails because it doesn't return true/false it returns returns [object Object] 
      if (item.isSelected() === true) { 
       console.log("subscription fired: " + item.title()); 
       // de-select all other items 
       ko.utils.arrayForEach(self.items(), function (subItem) { 
        if (subItem.title() !== item.title()) { 
         console.log("deselecting: " + subItem.title()); 
         subItem.isSelected(false); 
        } 
       }); 
      } 
     }; 

     self.subscribeToItems = function() { 
      console.log("subscribeToItems called"); 
      ko.utils.arrayForEach(self.items(), function (item) { 
       console.log("title: " + item.title() + ", isSelected: " + item.isSelected()); 
       item.isSelected.subscribe(function (currentItem) { 
        self.handleIsSelectedChange(currentItem); 
       }); 
      }); 
     }; 
    }; 

    return _constructor; 
})(); 

var menuItemModel = (function() { 
    function _constructor(title, icon) { 
     var self = this; 
     self.title = ko.observable(title || ""); 
     self.icon = ko.observable(icon || ""); 
     self.isSelected = ko.observable(false); 
    }; 
    return _constructor; 
})(); 


var menuVM = new menuViewModel(); 
menuVM.subscribeToItems(); 
ko.applyBindings(menuVM, $(".mainMenu").get(0)); 

回答

1

當您綁定反對click: isSelected,這將調用你的函數傳遞當前數據項爲第一個參數。

因爲,isSelected是可觀察的,所以通過第一項將它設置爲該值。所以,isSelected成爲對象本身。

您可能會想要在this.isSelected(!this.isSelected())的物品上創建toggleSelected功能。

訂閱被傳遞了新的值,所以在你的情況下是true/false,但它看起來像你想操作項目本身。

下面是一個示例,我們仍然會在訂閱被觸發時將項目傳遞給您的處理程序。

http://jsfiddle.net/rniemeyer/WP3s9/31/

另一種選擇可能是處理程序的情況下設置爲您的項目並在處理程序使用this。例如:http://jsfiddle.net/rniemeyer/WP3s9/32/