0
I私はの説明になり、その内のコンテンツトグル「本の虫バディ」、などの各項目をクリックするようにしたいhttps://codyc4321.github.io/knockoutjsでクリック可能なリスト項目の内部HTMLを作成し
で閲覧可能https://github.com/codyc4321/codyc4321.github.ioで次のアプリを、持っていますプロジェクト。
は、これまで私が試した：
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>
を。
私はそれをクリックし 'する必要があります推測：$ root.toggleVisible' –
また' item.visible（！item.visible（））; ' - 観察可能なvairiableの値にアクセスしながら、カッコは必須です –