0

Trabajo con Knockout y JQuery e intento poblar una lista en el html por medio de un each.

Mi colección, implementada con knockout bp-index.js es la siguiente:

/// <reference path="knockout-2.3.0.debug.js" />
/// <reference path="jquery-ui-1.8.24.js" />
/// <reference path="jquery-1.8.2.js" />
/// <reference path="ajax-util.js" />
/// <reference path="ko-protected-observable.js" />

$(function () {
    
        var data = [
            { Id: 1, Name: "Ball Handling" },
            { Id: 2, Name: "Passing" },
            { Id: 3, Name: "Shooting" },
            { Id: 4, Name: "Rebounding" },
            { Id: 5, Name: "Transition" },
            { Id: 6, Name: "Defense" },
            { Id: 7, Name: "Team Offense" },
            { Id: 8, Name: "Team Defense" }
    ];

    var viewModel = {
        // data
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),

        // behaviors
        addTag: function () {
            this.tags.push({ Name: this.tagToAdd() });
        }
    };

    ko.applyBindings(viewModel);
});

Este es mi index.cshtml:

    <div id="tagsList" class="box">
    <div class="box-head">
        <h2 class="left">Tags</h2>
    </div>
    <div class="box-content">
        <input type="text" placeholder="Add New Tag" />
        <button>+ Add</button>

        <div data-bind="template: 'tagsTempl'"></div>
    </div>
</div>

    <script id="tagsTempl" type="text/html">
        <ul>
            {{each tags}}
                <li class="tagItem">
                    <span>${Name}</span>
                    <div>
                        <a href="#" class="tag-edit">Edit</a>
                        <a href="#" class="tag-delete">Delete</a>
                    </div>
           

         </li>
            {{/each}}
        </ul>
    </script>
    
    <script src="@Url.Content("~/Scripts/bp-index.js")" type="text/javascript"></script>

Como resultado, obtengo lo siguiente:

lista con JQuery

No obstante, lo que espero que salga en la vista es lo siguiente:

        Ball Handling
        Passing
        Shooting
        Rebounding
        Transition
        Defense
        Team Offense
        Team Defense

1 respuesta 1

0

Si deseas llenar una lista <ul></ul> desde una matriz empleando Knockoutjs debes emplear data-binding="foreach: ..." en tu elemento contenedor. Por ejemplo, tienes una matriz llamada tags en tu viewModel, entonces puedes hacerlo de esta forma:

<ul data-bind="foreach: tags">
    <li class="tagItem">
        <span data-bind="text: $data.Name"></span>
        <div>
            <a href="#" class="tag-edit">Edit</a>
            <a href="#" class="tag-delete">Delete</a>
        </div>
    </li>
</ul>

Donde indicas que vas a iterar sobre tags y donde $data es donde Knocout coloca cada elemento de la iteración, por lo que puedes hacer $data.Id para accesar al id del elemento actual o también $data.Name.

Ahora bien, si lo que deseas es agregar una tag que muestre el Name como el valor que contenga tu <input> al momento de pulsar sobre el botón Add+, lo puedes hacer de esta manera:

var viewModel =
{
    currentTag:  "", // Creas esta variable, a la que pasaremos el valor del input
    ...

Y para pasarle el valor del <input> es de esta forma data-bind="value: currentTag", tal que así:

<input type="text" placeholder="Add New Tag" data-bind="value: currentTag" />

Por lo que en vez de:

this.tags.push({ Name: this.tagToAdd() });

Haces:

this.tags.push({ Name: this.currentTag });

Acá te dejo las referencias que consulté:

KnockJs foreach binding - 1

KnockJs foreach binding - 2

KnockJs click binding

SOen - KnockJs pass data from input to function

Y te dejo además, un ejemplo de código funcional que hice con jQuery 1.8.2 y KnockoutJs 2.3.0:

$(function () {
    
    var data = [
         { Id: 1, Name: "Ball Handling" },
         { Id: 2, Name: "Passing"       },
         { Id: 3, Name: "Shooting"      },
         { Id: 4, Name: "Rebounding"    },
         { Id: 5, Name: "Transition"    },
         { Id: 6, Name: "Defense"       },
         { Id: 7, Name: "Team Offense"  },
         { Id: 8, Name: "Team Defense"  }
    ];

    var viewModel =
    {
        currentTag:   "",
        tags:         ko.observableArray(data),
        addTag:       function ()
        {
            this.tags.push({ Name: this.currentTag });
        }
    };

    ko.applyBindings(viewModel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

<div id="tagsList" class="box">
    <div class="box-head">
        <h2 class="left">Tags</h2>
    </div>
    <div class="box-content">
        <input type="text" placeholder="Add New Tag" data-bind="value: currentTag" />
        <button data-bind="click: addTag">+ Add</button>
        <ul data-bind="foreach: tags">
            <li class="tagItem">
                <span data-bind="text: $data.Name"></span>
                <div>
                     <a href="#" class="tag-edit">Edit</a>
                     <a href="#" class="tag-delete">Delete</a>
                 </div>
            </li>
        </ul>
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.