knockout.js यदि सरणी खाली है या

Question

पर आधारित स्थिति को बदलती है तो मैं केवल एक तालिका दिखाने में सक्षम होना चाहता हूं यदि किसी सरणी में आइटम हैं। मैंने अपनी जरूरतों को इस jsfiddle उदाहरण में सरल बना दिया है।

जे एस:

var view_model = { 
    lines: ko.observableArray([ 
     { 
     content: 'one'}, 
    { 
     content: 'two'}, 
    { 
     content: 'three'}, 
    { 
     content: 'four'}, 
     ]), 
    remove: function(data) { 
     view_model.lines.remove(data); 
    } 
}; 

ko.applyBindings(view_model); 

HTML:

<span data-bind="visible:lines">Lines Exist</span> 
<ul data-bind='foreach:lines'> 
    <li> 
     <button data-bind="click:$parent.remove"> 
      Remove 
     </button> 
     <span data-bind="text:content"></span> 
    </li> 
</ul> 

असल में मैं कहाँ लाइनों तालिका से हटाया जा सकता है एक वेब एप्लिकेशन है। यदि array.length == 0, मैं पूरी तालिका को छिपाना चाहता हूं।

Answer 1

आप इसे कई तरीकों से कर सकते हैं। लाइन सरणी में कोई प्रविष्टि नहीं है, तो नीचे की पहेली पूरी तालिका को छिपाने के लिए कंटेनरलेस बाइंडिंग का उपयोग करती है।

http://jsfiddle.net/johnpapa/WLapt/4/

<span data-bind="visible:lines">Lines Exist</span> 
<!-- ko if: lines().length > 0--> 
<p>Here is my table</p> 
<ul data-bind='foreach:lines'> 
    <li> 
     <button data-bind="click:$parent.remove"> 
      Remove 
     </button> 
     <span data-bind="text:content"></span> 
    </li> 
</ul> 
<!-- /ko -->​ 

Answer 2

एक अन्य समाधान, अपने मूल प्रयास पर मामूली बदलाव:

<div data-bind="visible:lines().length"> 
    <span>Lines Exist</span> 
    <p>Here is my table</p> 
    <ul data-bind='foreach:lines'> 
     <li> 
      <button data-bind="click:$parent.remove"> 
       Remove 
      </button> 
      <span data-bind="text:content"></span> 
     </li> 
    </ul> 
</div> 

Answer 3

यह बुरा व्यवहार एचटीएमएल टेम्पलेट के लिए तर्क जोड़ने के लिए माना जाता है। मैं इस समाधान का सुझाव:

<div data-bind="with: lines">  
    <span data-bind="if: length">Lines Exist</span> 
    <ul data-bind='foreach:$data'> 
     <li> 
      <button data-bind="click:$parent.remove"> 
       Remove 
      </button> 
      <span data-bind="text:content"></span> 
     </li> 
    </ul> 
</div> 

Answer 4

अगर आप इस jsfiddle उदाहरण की तरह संदेश या छवि दिखाना चाहते हैं

<div data-bind="visible:lines().length"> 
    You will see this message only when "lines" holds a true value. 
    <img src=""/> 
</div> 

यदि आप संदेश छुपाना चाहते हैं जब तालिका लाइनों datas सफलतापूर्वक

<div data-bind="visible: !lines().length"> 
    You will see this message only when "lines" holds a false value. 
    <img src=""/> 
</div>