web-dev-qa-db-fra.com

knockout.js change l'état visible selon que le tableau est vide ou non

Je veux pouvoir afficher un tableau uniquement s'il y a des éléments dans un tableau. J'ai simplifié mes besoins avec cet exemple jsfiddle .

JS:

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>

Fondamentalement, j'ai une application Web où les lignes peuvent être supprimées du tableau. Si array.length == 0, Je veux masquer la table entière.

knockout.js
28
Ominus

Tu peux le faire de plusieurs façons. Le violon ci-dessous utilise les liaisons sans conteneur pour masquer la table entière si le tableau de lignes n'a pas d'entrées.

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 -->​
42
John Papa

Autre solution, légère variation sur votre tentative d'origine:

<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>
8
Lgiro

Il est considéré comme une mauvaise pratique d'ajouter de la logique au modèle html. Je suggère cette solution:

<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>
0
Johan Frick

si vous voulez afficher un message ou une image comme ceci jsfiddle exemple

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

si vous voulez masquer le message lorsque les données des lignes du tableau sont apparues avec succès

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