你如何在Knockout中观察JavaScript哈希表？

Question

在我的Knockout视图模型中,我有一些属性,我正在尝试创建一个可观察的哈希.而不是我的前Knockout代码

self.MyHash = {};

我现在正在使用:

self.MyHash = ko.observable({});

在我的代码的其他部分,我用这样的语句操作哈希:

// add an entry
self.MyHash()["test"] = "My Value";

// remove an entry
delete self.MyHash()["test"];

代码有效,因为条目被正确添加和删除.但是,哈希表的更改似乎没有被观察它的代码区域检测到.例如,当我更改哈希表时,这个计算的observable永远不会运行:

self.Querystring = ko.computed(function ()
{
    var f = [];
    $.each(self.MyHash(), function (k, v)
    {
        f.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
    });

    return (f.length > 0) ? f.join("&") : "";
});

我猜这是因为Knockout observable需要是简单的变量(或observableArrays),并且它没有检测到哈希表的底层更改.

如果是这样,还有其他选择吗？为什么Knockout中没有observableHash类型？

对于它的价值,我的解决方法是使用observableArray键和常规JavaScript哈希表来查找值.然后我改变了我的计算方法来观察键数组而不是之前的其他哈希表变量.我只是想确保我没有错过在Knockout中执行此操作的"正确方法".

self.MyHashKeys = ko.observableArray();
self.MyHash = {};

self.Querystring = ko.computed(function ()
{
    var f = [];
    $.each(self.MyHashKeys(), function (index, value)
    {
        f.push(encodeURIComponent(value) + '=' + encodeURIComponent(self.MyHash[value]));
    });

    return (f.length > 0) ? f.join("&") : "";
});

Answer 1

请参阅observable数组页面上的第二个示例.只需创建一组键/值对:

// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);

在您的示例中,您只是迭代(删除除外),因此不需要使用实际的字典.只搜索密钥就很容易了.我认为地图的使用在某种程度上是一种不成熟的优化.它也不完全符合查询字符串多次支持相同键的能力.

编辑:如果您想观察此示例中的键或值更改,您还必须使这些属性可观察:

var anotherObservableArray = ko.observableArray([
    { name: ko.observable("Bungle"), type: ko.observable("Bear") }
]);