2012-11-10 63 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/