Как мне изменить видимость HTML-элемента, используя knockoutjs?

Question

Как мне изменить видимость HTML-элемента, используя knockoutjs?

0

Я использую 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)

любая помощь приветствуется.

Jane Wayne 10 март 2014, в 07:00

Источник

Теги:

javascript

jquery

mvvm

knockout.js

1 ответ

Ещё вопросы

Akhlesh · Accepted Answer · 2014-03-10T04-16-00.000Z

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);
 };
};

Демо-версия скрипта