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

how do i toggle the visibility of an html element using knockoutjs ?

本文关键字：元素 可见性 html 切换 何使用 knockoutjs      更新时间：2023-09-26

我使用的是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));

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

showDetails : ko.observable(false)

任何帮助都将不胜感激。

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演示

相关文章：