使在knockoutjs點擊列表中的項目內HTML

我在https://github.com/codyc4321/codyc4321.github.io以下應用，觀看到https://codyc4321.github.io/使在knockoutjs點擊列表中的項目內HTML

我要讓點擊像「書蟲巴迪」撥動其內部的內容，每一個項目，這將是一個描述該項目。

到目前爲止，我嘗試：

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>

這沒有奏效。

來源

2017-06-14 codyc4321

我想這應該是'點擊：（！item.visible（））$ root.toggleVisible' –

也'item.visible;' - 括號是強制性的，同時訪問的可觀察vairiable的價值 –

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

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

來源

2017-06-14 06:09:37 Shadowfox

使在knockoutjs點擊列表中的項目內HTML

回答

相關問題