Usando Knockout.js con jQuery más reciente de archivos y ASP.NET MVC

Question

Estoy intentando utilizar Knockout.js con ASP.NET MVC 3.0 (Título se dio de distancia, ¿verdad?!)

http://knockout.js.com

Estoy corriendo en algunos problemas (más relacionados con el nuevo motor de jQuery tmpl ASP.NET MVC 3.0).

Estoy utilizando el Programa de ejemplo de Steve Sanderson en mi prueba, y tengo sobre todo replicado sus resultados con la nueva maquinilla de afeitar Vista del motor (no creo que la maquinilla de afeitar tiene nada que ver con mi problema).

http: // Blog .stevensanderson.com / 2010/07/12 / edición-a-longitud variable lista de knock-out de estilo /

Sin embargo, quiero hacer más con la unión de la naturales jQuery, en lugar de los atributos de enlace HTML. Esto se describe en detalle en el tutorial de nocaut. http://knockoutjs.com/documentation/template-binding.html

Sin embargo soy incapaz de reproducir esta ya que explica. Voy a mostrar a mi vista de código. Mi problema viene del hecho de que {{foreach (i, gift) gifts}} no funciona. He intentado muchas variantes ({{foreach (i, gift) gifts()}} como he visto en otros ejemplos).

Estoy utilizando el último archivo knockout.js. Estoy usando jQuery 1.4.3. estoy usando http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js de Motor de Plantillas. Sin embargo, también he intentado esto con el mismo archivo tmpl.js que se incluye en la página web de knockous.js, y obtener los mismos resultados.

  

Cuando se utiliza jQuery Plantillas, por la especificación actual, la plantilla no rinde.

El jQuery Template Etiquetas de documentación se encuentra aquí: http: // API. jquery.com/category/plugins/templates/template-tags/

En caso de que alguien estaba confundido acerca de mi modelo exacto. Si sustituyo con {{foreach (i, gift) gifts}} {{foreach gift}}, entonces el modelo y hace que se comporta correctamente, pero no puede utilizar las declaraciones ${property} nativos jQuery para nada.

HTML

@model IEnumerable<Knockout.GiftModel>
@using System.Web.Script.Serialization;

@{
    View.Title = "Index";
    Layout = "~/Views/Shared/_Site.cshtml";
}

    <h2>Gift list editor</h2>

    <form class="giftListEditor" action="/home/index" method="post" >
        <table> 
            <tbody data-bind="template:'giftRowTemplate'"></tbody> 
        </table>

        <button data-bind="click: addGift">Add Gift</button>
        <button data-bind="enable: gifts().length > 0" type="submit">Submit</button>
    </form>

    <script type="text/html" id="giftRowTemplate">
        {{each (i, gift) gifts}}
        <tr> 
            <td>Gift name: <input class="required" data-bind="value: Title, uniqueName: true" /> ${Title} </td> 
            <td>Price: $ <input class="required number" data-bind="value: Price, uniqueName: true"/></td> 
            <td><a href="#" data-bind="click: function() { viewModel.removeGift( $value ) }">Delete</a></td> 
        </tr>
        {{/each}}
    </script>

    <script type="text/javascript">
        var initialData = @(new HtmlString(Model.ToJson()));
        var viewModel = {
            gifts: ko.observableArray(initialData),
            addGift: function () {
                this.gifts.push({ Title: "", Price: "" });
            },

            removeGift: function (gift) {
                this.gifts.remove(gift);
            },

            save: function () {
                ko.utils.postJson(location.href, { gifts: this.gifts });
            }
        };

        ko.applyBindings(viewModel);
        $("form").validate({ submitHandler: function() { viewModel.save() } });
    </script>

Answer 1

Me acercarse a esto de manera diferente. Me gustaría utilizar la línea siguiente:

<tbody data-bind='template: { name: "giftRowTemplate", foreach: gifts }'></tbody>

en lugar de:

<tbody data-bind="template:'giftRowTemplate'"></tbody>

De esa manera usted no necesita utilizar la línea {{each (i, gift) gifts}} en la plantilla que le está dando problemas.

Answer 2

{{each gifts}} en lugar de {{each (i, gift) gifts}} hará el truco.