CODEWITHSUNDEEP
arraysif-statementknockout.js
Fero
Fero

Reputation: 13315

How to find if array exist - KnockOut

I need to run the below code only if documentation.files exist. Else it should not execute.

Something like: <!-- if (condition-here) -- > 

<!-- ko foreach: documentation.files --> 
                                    <tr>
                                        <th>
                                            <a data-bind="attr: { href: file_link[$root.locale.selected_locale()]}" target="_blank">
                                            <div class="block" data-bind="html: file_name[$root.locale.selected_locale()]"></div>
                                            </a>
                                        </th>
    <!-- /ko -->

Any help will be thankful..

Upvotes: 0

Views: 123

Answers (3)

theDarse
theDarse

Reputation: 737

Ok so this is a case of your web browser being helpful to you and causing problems. in this example 

<!-- ko foreach: documentation.files --> 
                                <tr>
                                    <th>
                                        <a data-bind="attr: { href: file_link[$root.locale.selected_locale()]}" target="_blank">
                                        <div class="block" data-bind="html: file_name[$root.locale.selected_locale()]"></div>
                                        </a>
                                    </th>
                                </tr>
<!-- /ko -->

it appears you are trying to do this binding inside a table. If this is the case them most likely the comment blocks are being removed from the table and placed infront of it. Causing something like this to actually appear 

<!-- ko foreach: documentation.files --> <!-- /ko -->
                             <table>
                                <tr>
                                    <th>
                                        <a data-bind="attr: { href: file_link[$root.locale.selected_locale()]}" target="_blank">
                                        <div class="block" data-bind="html: file_name[$root.locale.selected_locale()]"></div>
                                        </a>
                                    </th>
                                </table>

now the problem with this is obvious, the solution is to use a thead tag and do your foreach in that section 

<thead data-bind="foreach: documentation.files"> 
                                <tr>
                                    <th>
                                        <a data-bind="attr: { href: file_link[$root.locale.selected_locale()]}" target="_blank">
                                        <div class="block" data-bind="html: file_name[$root.locale.selected_locale()]"></div>
                                        </a>
                                    </th>
                                  </tr>
</thead>

or if you are working in the table body use instead. Also if that is a direct copy you need to close your table row tag

Upvotes: 0

Tanner
Tanner

Reputation: 22753

This should do the trick if it's not initialised:

<!-- ko if: documentation.files -- >

So it will proceed if it's not undefined.

Or if it's setup as an empty array:

<!-- ko if: documentation.files.length > 0 -- >

I'm guessing it's the first case you would need, otherwise your foreach would work without this check.

Upvotes: 1

Artem Petrosian
Artem Petrosian

Reputation: 2954

Wrap it into div

<div data-bind="if: documentation.files">
   ...
</div>

or

<!-- ko if: documentation.files -->
   ...
<!-- /ko -->

Upvotes: 1

Related Questions