knockout.js changement de statut de visibilité basé sur si le tableau est vide ou pas

Je veux être en mesure d'avoir un tableau montrent que si il y a des éléments dans un tableau. J'ai simplifié mes besoins à un jsfiddle exemple.

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 cacher la totalité de la table.

InformationsquelleAutor Ominus | 2012-02-15
  1. 42

    Vous pouvez le faire de plusieurs façons. Le violon ci-dessous utilise la containerless liaisons à masquer l'ensemble de la table si les lignes de tableau 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 -->​
    • N'a de ce fait travailler à la fois? data-bind="visible:lines" qui ne fonctionne pas maintenant. Vérifiez votre violon. data-bind="visible:lines().length" fonctionne, mais est moins élégant :/
    • j'ai juste couru le violon, supprimé les lignes et il retiré de la table.
    • Bizarre, elle n'est pas pour moi. i.stack.imgur.com/onb6q.png
    • ... Il y avait une référence externe pour knock-out 2.0 (situé sur le côté gauche), qui s'il a été retiré et remplacé par la version la plus récente (à l'intérieur du javascript config dans l'éditeur) fait ce travail. Ne sais pas où 2.0 ref est venu, mais qui semble avoir été mon problème
    • data-bind="visibles: les lignes" ne fonctionne pas si les lignes sont initialisés ou égalisé avec un tableau vide: lignes: ko.observableArray([])
    InformationsquelleAutor John Papa
  2. 7

    Une autre solution, une légère variation de l'original de votre tentative:

    <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>
    • Comme de ce commentaire, cela fonctionne alors que la réponse choisie n'est pas.
    InformationsquelleAutor Lgiro
  3. 0

    Il est considéré comme une mauvaise pratique pour ajouter de la logique du 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>
    • Je vois toujours la même logique ici?
    InformationsquelleAutor Johan Frick
  4. 0

    si vous souhaitez 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 lors de la table de lignes de données est apparu avec succès 

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