Javascript 取消可观察的Array项目属性更改不'；更新用户界面

当我将属性更改为

observableArlay

时，它不会更新UI

请参见下面和中的示例

单击标题应更新

排序

属性，并显示/隐藏相应的

span

Javascript:

var baseModel = [{
    key: 'name',
    type: 'string'
}, {
    key: 'surname',
    type: 'string'
}, {
    key: 'age',
    type: 'integer'
}]

var data = [{
    name: "John",
    surname: "Smith",
    age: 12
}, {
    name: "Peter",
    surname: "Klark",
    age: 3
}, {
    name: "Steve",
    surname: "Heisenberg",
    age: 43
}]

var vm = function () {
    var counter = 1;
    var people = ko.observableArray(data);
    var keys = ko.observableArray([]);
    var init = function () {
        var tempArray = [];
        _.each(baseModel, function (item, key) {
            tempArray.push({
                key: item.key,
                type: item.type,
                sorting: false,
                direction: "asc"
            });
        });
        // Set first column to sort by default
        tempArray[0].sorting = true;
        // Add 
        keys(tempArray);
    };

    var peopleList = ko.computed(function () {
        return people.sort(function (l, r) {
            var sortKey = _.where(keys(), {
                sorting: true
            }) || keys()[0];
            var result;
            if (typeof sortKey !== "undefined" && sortKey.length > 0) {
                result = (sortKey[0].direction === 'asc') ?
                    l[sortKey[0].key] > r[sortKey[0].key] ? 1 : -1 :
                l[sortKey[0].key] < r[sortKey[0].key] ? 1 : -1;
            } else {
                result = l[0] > r[0] ? 1 : -1;
            }
            return result;
        });
    });

    var addKey = function () {
        keys.push({
            key: "New Key No " + (counter++),
            type: 'string',
            sorting: false,
            direction: 'asc'
        });
    }

    var sortColumn = function (v) {
        if(v.sorting === true){
            v.direction = (v.direction === 'asc') ? 'desc' : 'asc';
        } else {
            _.each(keys(),function(item,key){
             keys()[key].sorting = false;
            })
            keys()[keys().indexOf(v)].sorting = true;
        }
        keys.valueHasMutated();
    }

    init();
    return {
        people: people,
        keys: keys,
        addKey: addKey,
        peopleList: peopleList,
        sort: sortColumn
    }
}

ko.applyBindings(new vm());

<table>
    <thead>
        <tr data-bind="foreach: keys">
            <td data-bind="click: $root.sort">
                <span data-bind="text: $data.key"></span>
                <span data-bind="visible: $data.sorting, text: 'sorting'"></span>
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: peopleList">
        <tr data-bind="foreach: $root.keys">
            <td data-bind="text: $parent[$data.key] || 'no data'">1</td>
        </tr>
    </tbody>
</table>
<button data-bind="click: addKey">Add new key</button>

var baseModel=[{
关键字：“名称”，
键入：“字符串”
}, {
关键词：“姓氏”，
键入：“字符串”
}, {
关键词：“年龄”，
类型：“整数”
}]
风险值数据=[{
姓名：“约翰”，
姓：“史密斯”，
年龄:12
}, {
姓名：“彼得”，
姓：“克拉克”，
年龄:3
}, {
姓名：“史蒂夫”，
姓：“海森堡”，
年龄:43
}]
var vm=函数（）{
var计数器=1；
var people=ko.observableArray（数据）；
var keys=ko.observableArray（[]）；
var init=函数（）{
var tempArray=[]；
_.每个（基本型号、功能（项目、关键）{
tempArray.push({
key:item.key，
类型：item.type，
排序：假，
方向：“asc”
});
});
//默认情况下，将第一列设置为排序
tempArray[0]。排序=true；
//加
键（临时数组）；
};
var peopleList=ko.computed（函数（）{
返回人员。排序（函数（l，r）{
var sortKey=\其中（keys（）{
排序：正确
})| |键（）[0]；
var结果；
if（sortKey的类型！=“未定义”&&sortKey.length>0）{
结果=（排序键[0]。方向=='asc'）？
l[sortKey[0]。key]>r[sortKey[0]。key]？1:-1：
l[sortKey[0].key]r[0]？1:-1；
}
返回结果；
});
});
var addKey=函数（）{
按键({
键：“新键号”+（计数器++），
键入：“字符串”，
排序：假，
方向：“asc”
});
}
var sortColumn=函数（v）{
如果（v.排序===真）{
v、 方向=（v.direction=='asc'）？'desc'：'asc'；
}否则{
_.每个（键（），函数（项，键）{
keys（）[key]。排序=false；
})
keys（）[keys（）.indexOf（v）]。排序=真；
}
key.valuehassmutated（）；
}
init（）；
返回{
人:人,，
钥匙：钥匙，
addKey:addKey，
人物列表：人物列表，
排序：sortColumn
}
}
应用绑定（新vm（））；

HTML:

var baseModel = [{
    key: 'name',
    type: 'string'
}, {
    key: 'surname',
    type: 'string'
}, {
    key: 'age',
    type: 'integer'
}]

var data = [{
    name: "John",
    surname: "Smith",
    age: 12
}, {
    name: "Peter",
    surname: "Klark",
    age: 3
}, {
    name: "Steve",
    surname: "Heisenberg",
    age: 43
}]

var vm = function () {
    var counter = 1;
    var people = ko.observableArray(data);
    var keys = ko.observableArray([]);
    var init = function () {
        var tempArray = [];
        _.each(baseModel, function (item, key) {
            tempArray.push({
                key: item.key,
                type: item.type,
                sorting: false,
                direction: "asc"
            });
        });
        // Set first column to sort by default
        tempArray[0].sorting = true;
        // Add 
        keys(tempArray);
    };

    var peopleList = ko.computed(function () {
        return people.sort(function (l, r) {
            var sortKey = _.where(keys(), {
                sorting: true
            }) || keys()[0];
            var result;
            if (typeof sortKey !== "undefined" && sortKey.length > 0) {
                result = (sortKey[0].direction === 'asc') ?
                    l[sortKey[0].key] > r[sortKey[0].key] ? 1 : -1 :
                l[sortKey[0].key] < r[sortKey[0].key] ? 1 : -1;
            } else {
                result = l[0] > r[0] ? 1 : -1;
            }
            return result;
        });
    });

    var addKey = function () {
        keys.push({
            key: "New Key No " + (counter++),
            type: 'string',
            sorting: false,
            direction: 'asc'
        });
    }

    var sortColumn = function (v) {
        if(v.sorting === true){
            v.direction = (v.direction === 'asc') ? 'desc' : 'asc';
        } else {
            _.each(keys(),function(item,key){
             keys()[key].sorting = false;
            })
            keys()[keys().indexOf(v)].sorting = true;
        }
        keys.valueHasMutated();
    }

    init();
    return {
        people: people,
        keys: keys,
        addKey: addKey,
        peopleList: peopleList,
        sort: sortColumn
    }
}

ko.applyBindings(new vm());

<table>
    <thead>
        <tr data-bind="foreach: keys">
            <td data-bind="click: $root.sort">
                <span data-bind="text: $data.key"></span>
                <span data-bind="visible: $data.sorting, text: 'sorting'"></span>
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: peopleList">
        <tr data-bind="foreach: $root.keys">
            <td data-bind="text: $parent[$data.key] || 'no data'">1</td>
        </tr>
    </tbody>
</table>
<button data-bind="click: addKey">Add new key</button>

1.
添加新密钥

您可以将排序属性设置为可观察的：

tempArray.push({
    key: item.key,
    type: item.type,
    sorting: ko.observable(false),
    direction: "asc"
});

我根据你的小提琴做了修改：

---

事实上我已经做了，但是你需要更新你的答案才能真正起作用，然后我会接受它。你的小提琴坏了。这是一把小提琴