我该如何使用Knockoutjs切换html元素的可见性？

Question

我正在使用淘汰表v3.1.0。 我正在尝试建立类似主视图的视图。 我遇到的问题是元素没有显示（尽管它们隐藏了）。 我的模拟代码位于http://jsfiddle.net/jwayne2978/qC4RF/3/

这是我的html代码。

<div data-bind="foreach: users">
<div>Row</div>
<div data-bind="text: username"></div>
<div data-bind="visible: showDetails">
    <div data-bind="text: address"></div>
</div>
<div> 
    <a href="#" 
        data-bind="click: $root.toggleDetails">
            Toggle Div
    </a>
</div>

这是我的JavaScript代码

var usersData = [
{ username: "test1", address: "123 Main Street" }, 
 { username: "test2", address: "234 South Street" }
];

var UsersModel = function (users) {
    var self = this;
    self.users = ko.observableArray(
        ko.utils.arrayMap(users, function (user) {
            return {
                username: user.username,
                address: user.address,
                showDetails: false
            };
        }));
    self.toggleDetails = function (user) {
        user.showDetails = !user.showDetails;
        console.log(user);
    };
};

ko.applyBindings(new UsersModel(usersData));

应该发生的是，当用户单击链接时，应该显示相应的HTML div。 控制台将清楚显示该属性已在用户对象上更改，但HTML元素的可见性未更改。 我还明确地使showDetails属性可观察，但这没有帮助。

showDetails : ko.observable(false)

任何帮助表示赞赏。

Answer 1

var UsersModel = function (users) {
var self = this;
//var flag=ko.observable(true);
self.users = ko.observableArray(
    ko.utils.arrayMap(users, function (user) {
        return {
            username: user.username,
            address: user.address,
            showDetails: ko.observable(false)  //it should be observable
        };
    }));
self.toggleDetails = function (user) {
    user.showDetails(!user.showDetails());
    console.log(user);
 };
};

小提琴演示