Question

我正在使用knockoutjs 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);
 };
};

Fiddle Demo

如何使用knockoutjs切换html元素的可见性？

1 个答案: