Question

我在https://github.com/codyc4321/codyc4321.github.io有以下应用，可在https://codyc4321.github.io/

上查看

我想点击每个项目，例如＆＃34; Bookworm Buddy＆＃34;切换其内部内容，这将是项目的描述。

到目前为止，我试过了：

function AppViewModel() {
    this.projects = [
        ...
        {
            name: "Javascript Instructor",
            visible: ko.observable(false)
        },
        {
            name: "Expenses/deductions Tracker",
            visible: ko.observable(false)
        },
        {
            name: "Property Manager",
            visible: ko.observable(false)
        },
    ];

    // self.toggleVisible = function(item) { self.projects.remove(seat) };
    self.toggleVisible = function(item) {
        console.log('clicked')
        // debugger;
        item.visible(!item.visible);
    };

}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

和

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="styles.css"></link>
</head>

<body>
    <div class="container">
        <h1 style="text-align: center;">Open Source Internship Program</h1>
        <p class="intro-text">Work with an experienced developer on open source projects that solve a real-world problem.</p>
        <p class="intro-text">End up with a finished product that works and can support actual customers.</p>
        <div data-bind="foreach: projects" >
            <h3 data-bind="text: name, click: toggleVisible"></h3>
                <div data-bind="visible: $data.visible">
                    <p>blah</p>
                </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

哪个没用。

Answer 1

clickHandler位于父viewModel中，而不在arrayobject中。使用

data-bind="click: $parent.toggleVisible"

使列表项的内部HTML可以在knockoutjs中单击

1 个答案: