如何檢查對象是否在knockoutjs的第2級達到？

Question

我使用knockoutjs將數據綁定，我有這樣一個JSON：

{ 
"data": [ 
{ 
    "ID": "EBED739E30005025B9A4E2E88771B9E2D786B71C", 
    "content": "this is comment 1", 
    "userName": "Jonh", 
    "replies": [ 
    { 
     "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
     "userName": "Peter", 
     "content": "this is reply 2 of comment 1", 
     "replies": [ 
     { 
     "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
     "userName": "Kevin", 
     "content": "this is reply 3 of 2" 
     } 
    ] 
    } 
], 
"success": 1 
} 

而且我要如何檢查對象答覆，2級達到這樣我可以禁用按鈕答覆。 這裏是HTML：

<script type="text/html" id="template-reply"> 
<div class="ui two column grid" > 
    <div class="twelve wide column"> 
     <span class="neeah-bold" data-bind="text:Username"></span> 
     <p data-bind="text: content"></p> 
     <span> 
      //here I want to disable button if it is a reply leve 2 
      <!-- ko if: typeof replies.replies === "undefined" --> 
      <a class="neeah-gray-midium active-reply" data-bind="click: $root.openReply"> 
       <i class="fa fa-reply fa-1x"></i> 
      </a> 
      <!-- /ko --> 
     </span> 
    </div> 
</div> 
<!-- ko if: typeof replies != 'undefined' --> 
    <div class="reply"> 
     <div class="ui segment show-reply-level" data-bind="template: { name: 'template-reply', foreach: replies }"></div> 
    </div> 
<!-- /ko --> 

所以，我怎麼能檢查對象答覆是2級，然後我可以禁用按鈕？

Answer 1

看來你應該能夠做這樣的事情：

<!-- ko if: $parents.length == 2 --> 

Answer 2

你可以使用enable綁定：

enable: replies.replies().length == 0 

然後，你<span>將變爲：

<span> 
    <a class="neeah-gray-midium active-reply" data-bind="click: $root.openReply, enable: replies.replies().length == 0"> 
      <i class="fa fa-reply fa-1x"></i> 
    </a> 
</span> 

Answer 3

我改變你的邏輯了一下。我檢查的父母，如果元素有level2的具有replies屬性，則父我們對回覆2級

var data = { 
 
    "data": [{ 
 
     "ID": "EBED739E30005025B9A4E2E88771B9E2D786B71C", 
 
     "content": "this is comment 1", 
 
     "userName": "Jonh", 
 
     "replies": [{ 
 
      "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
 
      "userName": "Peter", 
 
      "content": "this is reply 2 of comment 1", 
 
      "replies": [{ 
 
       "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
 
       "userName": "Kevin", 
 
       "content": "this is reply 3 of 2" 
 
      }] 
 
     }], 
 
    }, { 
 
     "ID": "EBED739E30005025B9A4E2E88771B9E2D786B71C", 
 
     "content": "this is comment 1", 
 
     "userName": "Jonh", 
 
     "replies": [{ 
 
      "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
 
      "userName": "Peter", 
 
      "content": "this is reply 2 of comment 1" 
 
     }], 
 
    }], 
 
    "success": 1, 
 
    openReply: function() { 
 
     alert('Reply'); 
 
    } 
 
}; 
 
    
 
ko.applyBindings(data);

.neeah-bold { 
 
    font-weight: bold; 
 
} 
 

 
.reply { 
 
    padding-left: 10px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script type="text/html" id="template-reply"> 
 
<div class="ui two column grid"> 
 
    <div class="twelve wide column"> 
 
     <span class="neeah-bold" data-bind="text:userName"></span> 
 
     <p data-bind="text: content"></p> 
 
     <span> 
 
      <!-- here I want to disable button if it is a reply leve 2 --> 
 
      <!-- ko if: $parents.length < 2 || !$parents[1].replies --> 
 
      <a class="neeah-gray-midium active-reply" data-bind="click: $root.openReply"> 
 
       <i class="fa fa-reply fa-1x">Reply</i> 
 
      </a> 
 
      <!-- /ko --> 
 
     </span> 
 
    </div> 
 
</div> 
 
<!-- ko if: $data.replies !== undefined --> 
 
    <div class="reply"> 
 
     <div class="ui segment show-reply-level" data-bind="template: { name: 'template-reply', foreach: replies }"></div> 
 
    </div> 
 
<!-- /ko --> 
 
</script> 
 

 
<div data-bind="template: { name: 'template-reply', foreach: data }"></div>

另一個稍微複雜一點的選擇是通過自定義的選項模板

var data = { 
 
    "data": [{ 
 
     "ID": "EBED739E30005025B9A4E2E88771B9E2D786B71C", 
 
     "content": "this is comment 1", 
 
     "userName": "Jonh", 
 
     "replies": [{ 
 
      "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
 
      "userName": "Peter", 
 
      "content": "this is reply 2 of comment 1", 
 
      "replies": [{ 
 
       "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
 
       "userName": "Kevin", 
 
       "content": "this is reply 3 of 2" 
 
      }] 
 
     }], 
 
    }, { 
 
     "ID": "EBED739E30005025B9A4E2E88771B9E2D786B71C", 
 
     "content": "this is comment 1", 
 
     "userName": "Jonh", 
 
     "replies": [{ 
 
      "ID": "5FE7FF30630519A47B561A2CB1965C5F7395C14B", 
 
      "userName": "Peter", 
 
      "content": "this is reply 2 of comment 1" 
 
     }], 
 
    }], 
 
    "success": 1, 
 
    openReply: function() { 
 
     alert('Reply'); 
 
    } 
 
}; 
 
    
 
ko.applyBindings(data);

.neeah-bold { 
 
    font-weight: bold; 
 
} 
 

 
.reply { 
 
    padding-left: 10px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script type="text/html" id="template-reply"> 
 
<div class="ui two column grid"> 
 
    <div class="twelve wide column"> 
 
     <span class="neeah-bold" data-bind="text:userName"></span> 
 
     <p data-bind="text: content"></p> 
 
     <span> 
 
      <!-- here I want to disable button if it is a reply leve 2 --> 
 
      <!-- ko if: level < 2 --> 
 
      <a class="neeah-gray-midium active-reply" data-bind="click: $root.openReply"> 
 
       <i class="fa fa-reply fa-1x">Reply</i> 
 
      </a> 
 
      <!-- /ko --> 
 
     </span> 
 
    </div> 
 
</div> 
 
<!-- ko if: $data.replies !== undefined --> 
 
    <div class="reply"> 
 
     <div class="ui segment show-reply-level" data-bind="template: { name: 'template-reply', foreach: replies.map(function (item) { item.level = $data.level + 1; return item;}) }"></div> 
 
    </div> 
 
<!-- /ko --> 
 
</script> 
 

 
<div data-bind="template: { name: 'template-reply', foreach: data.map(function (item) { item.level = 0; return item;}) }"></div>