Javascript 如何从主视图模型更新组件内部的可观察阵列？

我需要从主视图模型中设置一个可观察数组中的属性

我正在使用经典的

pre

来调试和显示我的可观察数组的内容。 通过使用

types.valueHasMutated（）

我可以看到应用的更改-仅限于

vm.types

（否则情况不会如此）

但是，我需要看到这些变化反映在我的组件中

在我的示例中，当我单击“Apples”时，相应的输入将被禁用，如下所示。不幸的是，事实并非如此

我做错了什么

ko.components.register（“可用项”{
viewModel:函数（参数）{
函数可用项（参数）{
var self=这个；
self.params=params；
self.location=“A”；
self.types=ko.computed（函数（）{
var types=self.params.types（）；
return ko.utils.arrayFilter（类型、功能（项）{
return item.location==self.location；
});
});
self.addItem=函数（数据、事件）{
self.params.items.addItem（self.location，data.type）；
};
}
返回新的可用项（参数）；
},
模板：“”+
“添加项目”+
“
”+
“
”+
'' +
“
”+
“
”+
'',
同步：对
});
变量类型=[{
字体：“苹果”，
地点：“A”，
可用：真
}, {
类型：“香蕉”，
地点：“A”，
可用：false
}];
函数Vm（数据）{
var self=这个；
self.items=ko.observearray（）；
self.types=ko.observearray（ko.utils.arrayMap）（数据、函数（项）{
退货项目；
}));
self.items.addItem=函数（位置、类型）{
self.items.push({
地点:地点,，
类型：类型
});
如果（位置=“A”&&type=“苹果”）{
self.types（）[0]。available=false；
self.types.valueHasMutated（）；
}
};
}
ko.options.deferUpdates=true；
var vm=新的vm（类型）；
ko.应用绑定（vm）
pre{
位置：绝对位置；
宽度：300px；
右：0；
排名：0；
}


-

我发现了问题。它在html中：“params:vm”应该是“params:$data”

我发现了问题。它在html中：“params:vm”应该是“params:$data”

我已经在JFIDLE上运行了这个，即使我添加了一个新类型，也没有得到任何更新

看起来这是一个问题

'<ul data-bind="foreach: types">' +

”
'+

我把它改成了

'
'+


现在添加了类型，但似乎没有处理第一项的重新呈现。有类似问题的人建议使用此处所述的模板渲染


希望这有帮助
我已经在jfiddle上运行了这个，即使我添加了一个新类型，也没有得到任何更新

看起来这是一个问题

'<ul data-bind="foreach: types">' +

”
'+

我把它改成了

'
'+


现在添加了类型，但似乎没有处理第一项的重新呈现。有类似问题的人建议使用此处所述的模板渲染


希望这有帮助
您的可用属性不可见。为了通知Knockout更改并让它更新UI，请使此属性可见


ko.components.register（“可用项”{
viewModel:函数（参数）{
函数可用项（参数）{
var self=这个；
self.params=params；
self.location=“A”；
self.types=ko.computed（函数（）{
var types=self.params.types（）；
return ko.utils.arrayFilter（类型、功能（项）{
return item.location==self.location；
});
});
self.addItem=函数（数据、事件）{
self.params.items.addItem（self.location，data.type）；
};
}
返回新的可用项（参数）；
},
模板：“”+
“添加项目”+
“
”+
“
”+
'' +
“
”+
“
”+
'',
同步：对
});
变量类型=[{
字体：“苹果”，
地点：“A”，
//使属性可见
可用：可观测（真实）
}, {
类型：“香蕉”，
地点：“A”，
//使属性可见
可用：ko.可观察（假）
}];
函数Vm（数据）{
var self=这个；
self.items=ko.observearray（）；
self.types=ko.observearray（ko.utils.arrayMap）（数据、函数（项）{
退货项目；
}));
self.items.addItem=函数（位置、类型）{
self.items.push({
地点:地点,，
类型：类型，
可用：ko.可观察（假）
});
如果（位置=“A”&&type=“苹果”）{
//将属性更新为可观察。
self.types（）[0]。可用（false）；
self.types.valueHasMutated（）；
}
};
}
ko.options.deferUpdates=true；
var vm=新的vm（类型）；
ko.应用绑定（vm）
pre{
位置：绝对位置；
宽度：300px；
右：0；
排名：0；
}


-

您的可用属性不可见。为了通知Knockout更改并让它更新UI，请使此属性可见


ko.components.register（“可用项”{
viewModel:函数（参数）{
函数可用项（参数）{
var self=这个；
self.params=params；
self.location=“A”；
self.types=ko.computed（函数（）{
var types=self.params.types（）；
return ko.utils.arrayFilter（类型、功能（项）{
return item.location==self.location；
});
});
self.addItem=函数（数据、事件）{
self.params.items.addItem(
ko.observableArray.fn.refresh = function (item) {
    var index = this['indexOf'](item);
    if (index >= 0) {
        this.splice(index, 1);
        this.splice(index, 0, item);
    }
}

self.items.addItem = function(location, type) {
    self.items.push({
        location: location,
        type: type
    });
    if (location == "A" && type == "Apples") {
        self.types()[0].available = false;
        self.types.refresh(self.types()[0]); // <--- New sentence
    }
};

ko.observableArray.fn.refresh = function (item) {
    var index = this['indexOf'](item);
    if (index >= 0) {
        this.splice(index, 1);
        ko.tasks.runEarly(); // <--- New sentence
        this.splice(index, 0, item);
    }
}

// PauseableObservable - it's observable that have functions to 'pause' and 'resume' notifications to subscribers (pause/resume work recursive for all pauseable child).

ko.isPauseableObservable = function(instance) {
    return ko.isObservable(instance) && instance.hasOwnProperty("pause");
}

ko.pauseableObservable = function(value) {
    var that = ko.observable(value);

    function getPauseableChildren() {
        var properties = Object.getOwnPropertyNames(that());
        var currentValue = that();
        var pauseables = properties.filter((property) => {
            return ko.isPauseableObservable(currentValue[property]);
        });
        return pauseables.map((property) => { 
            return currentValue[property];
        });
    }

    that.pauseNotifications = false;
    that.isDirty = false;

    that.notifySubscribers = function() {
        if (!that.pauseNotifications) {
            ko.subscribable.fn.notifySubscribers.apply(that, arguments);
            that.isDirty = false;
        } else {
            that.isDirty = true;
        }
    };

    that.pause = function() {    
        that.pauseNotifications = true;
        var pauseableChildren = getPauseableChildren();
        pauseableChildren.forEach((child) => { child.pause(); });
    }

    that.resume = function() {    
        that.pauseNotifications = false;

        if (that.isDirty) {
            that.valueHasMutated();
        }

        var pauseableChildren = getPauseableChildren();
        pauseableChildren.forEach((child)=> { child.resume(); });
    }

    return that;
}

// PauseableObservableArray - simply use pauseable functionality of his items. 
// Extension for stop notifications about added/removed items is out of scope.
ko.pauseableObservableArray = function(items) {
    var that = ko.observableArray(items);

    that.pause = function () {
        var items = that();
        items.forEach(function(item) {
            if(ko.isPauseableObservable(item)) {
                item.pause();
            }
        });
    }

    that.resume = function () {
        var items = that();
        items.forEach(function(item) {
            if(ko.isPauseableObservable(item)) {
                item.resume();
            }
        });
    }

    that.refresh = function () {
        that.resume();
        that.pause();
    }

    return that;
}

var firstItem = ko.pauseableObservable("Hello");
var secondItem = ko.pauseableObservable("World");
var items = [
    firstItem,
    secondItem
];
var array = ko.pauseableObservable(items);

// Stop notifications from specific observable
firstItem.pause();
// Change won't raise notification to subscribers
firstItem("Hi");
// Resume notifications
firstItem.resume();

// Stop notifications from all items of array
array.pause();
// Change won't raise notification to subscribers
array()[0]("Hi");
// Resume notifications
array.resume();