淘汰賽嵌套項目的可見性

我想要使用淘汰賽切換嵌套項目的可見性。在頁面的初始顯示中，我不希望嵌套的項目可見。如果用戶點擊鏈接顯示嵌套項目，那麼我希望顯示這些嵌套項目（不是所有嵌套項目）。淘汰賽嵌套項目的可見性

例如，我有一個產品列表，並且對於每個產品，我都有一個星級評定列表。默認情況下或初始頁面加載時，評級不顯示。如果用戶點擊「評分」，則會顯示該項目的評分。如果用戶點擊其他項目的「評分」，則會顯示該產品的評分以及另一項評分。

爲了說明這一點，我有兩個產品：

三星等級

iPhone等級

如果我點擊iPhone的評級，那麼iPhone的收視率顯示：

Samsung Ratings  
iPhone Ratings 
    1203: 3 
    1204: 2

如果我點擊三星的評級，然後三星的老鼠英格斯也表示：

Samsung Ratings 
    1201: 5 
    1202: 4 
iPhone Ratings 
    1203: 3 
    1204: 2

然後如果我點擊任一的收視率，收視率對於產品變得不可見。

我的樣本HTML如下：

<ul data-bind="foreach: products"> 
    <li><span data-bind="text: ProductName"></span> 
     <a href="#" data-bind="click: $parent.toggleVisibility">Ratings</a> 
     <ul data-bind="foreach: StarRatings, visible: $parent.shouldShowRatings"> 
      <li><span data-bind="text: RatingId"></span>: <span data-bind="text: RatingValue"></span></li> 
     </ul> 
     </li> 
</ul>

使用Knockout.js 3.0.0 JavaScript中的示例如下：

var initialProducts = [{ 
    ProductName: "Samsung", 
    StarRatings: [{ 
     RatingId: 1201, 
     RatingValue: 5 
     }, 
     { 
      RatingId: 1202, 
      RatingValue: 4 
     } 
    ] 
}, { 
    ProductName: "iPhone", 
    StarRatings: [{ 
     RatingId: 1203, 
     RatingValue: 3 
     }, 
     { 
      RatingId: 1204, 
      RatingValue: 2 
     } 
    ] 
}]; 

(function (ko) { 
    function products(data) { 

     var self = this; 
     data = data || {}; 

     // Persisted properties 
     self.ProductId = data.ProductId;  
     self.StarRatings = data.StarRatings; 
    }  
})(ko); 

var viewModel = (function(ko){ 
    var products = ko.observableArray(initialProducts), 
     showRatings = ko.observableArray(), 
     toggleVisibility = function(item) { 
      if(showRatings.indexOf(item) < 0){ 
       showRatings.push(item); 
      } 
      else{ 
       showRatings.remove(item); 
      } 
     }, 
     shouldShowRatings = function(item) { 
      if(showRatings.indexOf(item) >= 0){ 
       return true; 
      } 
      { 
       return false; 
      } 
     }; 

    return { 
     products: products, 
     showRatings: showRatings, 
     toggleVisibility: toggleVisibility, 
     shouldShowRatings: shouldShowRatings 
    }; 
})(ko); 

ko.applyBindings(viewModel);

我已經能夠顯示所有評級或演出沒有。我也可以將其設置爲一次只顯示一個的位置，但我認爲此代碼最接近我需要的解決方案。

它看起來像click事件之後，shouldShowRatings的可視性沒有呼籲StarRatings知名度。

的示例代碼也對的jsfiddle在http://jsfiddle.net/justinnafe/866my/4/

來源

2014-03-18 Justin Nafe

只需更新綁定調用函數與$數據作爲第一個參數：http://jsfiddle.net/866my/6/

<ul data-bind="foreach: products"> 
    <li><span data-bind="text: ProductName"></span> 
     <a href="#" data-bind="click: $parent.toggleVisibility($data)">Ratings</a> 
     <ul data-bind="foreach: StarRatings, visible: $parent.shouldShowRatings($data)"> 
      <li><span data-bind="text: RatingId"></span>: <span data-bind="text: RatingValue"></span></li> 
     </ul> 
    </li> 
</ul>

的重要組成部分，是您使用函數表示法來獲取綁定來檢查更新。

來源

2014-03-18 20:23:11 ArrayKnight

爲什麼頁面加載時的點擊事件觸發器？我需要最初不可見。任何想法如何做到這一點？ –

我可以找到關於爲什麼點擊事件觸發頁面加載的最佳解釋是對象文字在頁面加載時得到評估（http://stackoverflow.com/questions/19276164/knockoutjs-why-does-click-data-結合 - 已經-執行上的負載的元件）;不過，我相信我正在使用自調用函數，並需要將click事件包裝在匿名函數中。 http://jsfiddle.net/justinnafe/866my/9/ –

更好的方法來解決最初的評價是使用標準KO方式： http://jsfiddle.net/866my/10/

變化

<a href="#" data-bind="click: $parent.toggleVisibility($data)">Ratings</a>

到

<a href="#" data-bind="click: $parent.toggleVisibility">Ratings</a>

現在正得到一個函數對象（toggleVisibility函數），它將不會調用該函數，直到您點擊它。

ko默認將當前上下文$ data作爲第一個參數傳遞給目標函數，因此不需要顯式調用（$ data）。

來源

2014-03-19 05:36:16 huocp

淘汰賽嵌套項目的可見性

回答

相關問題