Question

我的模型中有一个计算的observable。它是可更新的。它将select数组中的第一个值写入用户Roles数组，尽管从中读取了正确的值，因此它很混乱。如果您尝试我的JSFiddle，您会看到，在您从select中选择另一个值后，其他依赖项不会更改。我怎样才能使它工作？谢谢！

<div id="UserManagement" class="container">
<div class="col-md-12">
    <div data-bind="with: user">
        <select data-bind="options: $root.apps, value: app, optionsText: 'name', optionsValue: 'code'"></select>
    </div>
    <select data-bind="options: apps, value: user().app, optionsText: 'name', optionsValue: 'code'"></select>
    <!-- ko foreach: user().roles -->
    <input type="text" data-bind="value : $data" />
    <!-- /ko -->
</div>

function UserManagementModel() {
var self = this;
self.apps = [{
    code: "ROLE_APP1",
    name: "App1"
}, {
    code: "ROLE_App2",
    name: "App2"
}, {
    code: "ROLE_MANAGER",
    name: "Manager panel"
}];
self.user = ko.observable(new User({
    userId: 1,
    username: "Nick",
    roles: ["ROLE_MANAGER", "ROLE_CHANGE_USER"]
}))}
function User(data) {
var self = this;
self.userId = data.userId;
self.username = ko.observable(data.username);
self.roles = ko.observableArray(data.roles);
self.app = ko.computed({
    read: function () {
        return ko.utils.arrayFilter(self.roles(), function (value) {
            return value.indexOf('_', value.indexOf('_') + 2) < 0;
        })[0];
    },
    write: function (value) {
        $.each(self.roles(), function (indx, role) {
            if (role.indexOf('_', role.indexOf('_') + 1) < 0) self.roles()[indx] = value;
        });
    },
    owner: self
}).extend({
    throttle: 50
});}
var model = new UserManagementModel();ko.applyBindings(model);

Answer 1

@Skeeve我不清楚你想要实现的目标，但你计算的observable（app）没有评估的原因是因为：

计算出的observable（app）的依赖关系是角色observable数组，在你的write函数中，你正在更新observable数组的值（不是数组），这个数组本身是不可观察的，所以淘汰没有'找到可观察数组的任何变化，因为它的读取函数没有执行

因此，如果要在角色数组值更改时评估计算的observable（app），则必须在角色observable数组中创建可观察的每个值，在这种情况下，您可以执行此操作：

...
    roles: [
              ko.observable("ROLE_MANAGER"), 
              ko.observable("ROLE_CHANGE_USER")]
..

Check this fiddle

KO可更新从数组计算

1 个答案: