0
function AppViewModel() {
self.tagbuttons=ko.observableArray([
    {shotbar:false, frozendrinks: false, livemusic: false, patio:false, food:false}
    ]);

self.toggleTag = function(data,event) {
    var id = event.target.id;

    self.tagbuttons()[0][id] = !self.tagbuttons()[0][id];
    console.log(self.tagbuttons()[0][id]);
    if(self.tagbuttons()[0][id] == true)
    {
        $(event.target).closest('li').addClass("active");
        console.log(event.target.id+":"+"active");
    }
    else
    {
        $(event.target).closest('li').removeClass("active");
        console.log(event.target.id+":"+"inactive");}
    }
}

ko.applyBindings(new AppViewModel());

我的 console.log(self.tagbuttons()[0][id]) 输出正确的 bool 值,但我的数组中的值没有更新。这是我的html:

 <div data-bind="text: tagbuttons()[0].shotbar"></di>
4

2 回答 2

0

这是来自 ko 文档的引用:

关键点:一个 observableArray 跟踪数组中有哪些对象,而不是那些对象的状态

简单地将一个对象放入 observableArray 并不能使该对象的所有属性本身都可观察。当然,如果您愿意,您可以使这些属性可观察,但这是一个独立的选择。observableArray 只跟踪它持有的对象,并在添加或删除对象时通知侦听器。

因此,当您更改数组项的值时,不会通知剔除。您可以使用valueHasMutated函数手动通知订阅者:

self.tagbuttons()[0][id] = !self.tagbuttons()[0][id];
self.tagbuttons.valueHasMutated();

或使用以下方法将项目包装在数组中observalbe

self.tagbuttons = ko.observableArray([
ko.observable({
    shotbar:false, 
    frozendrinks: false, 
    livemusic: false, 
    patio:false, 
    food:false})
    ]);
于 2012-10-27T07:43:58.530 回答
0

在声明 MyAppViewModel 和加载 UI 之后,您需要应用 KO 绑定:

$(document).ready(function(){
    ko.ApplyBindings(new MyAppViewModel())?  
});

除非您应用 KO 绑定,否则在视图模型之外不会发生任何事情。

于 2012-10-26T22:23:24.000 回答