En utilisant Knockout.js avec le plus récent jQuery fichiers et ASP.NET MVC

Question

Je cherche à utiliser Knockout.js avec ASP.NET MVC 3.0 (titre il trahissait, ne pas!)

http://knockout.js.com

Je suis en cours d'exécution dans certains problèmes (plus liés au nouveau moteur jQuery Tmpl que ASP.NET MVC 3.0).

J'utilise l'exemple de programme de Steve Sanderson dans mon test, et ai la plupart du temps reproduit ses résultats avec le nouveau rasoir View Engine (je ne crois pas rasoir n'a rien à voir avec mon problème).

http: // Blog .stevensanderson.com / 2010/07/12 / édition-a-longueur variable-list-KO style /

Cependant, je veux faire plus avec naturel jquery obligatoire, au lieu des attributs de liaison HTML. Ceci est décrit en détail sur le tutoriel de knock-out. http://knockoutjs.com/documentation/template-binding.html

Cependant, je ne peux pas reproduire ce qu'il explique. Je montrerai en dessous de mon Afficher le code. Mon problème vient du fait que {{foreach (i, gift) gifts}} ne fonctionne pas. J'ai essayé de nombreuses variantes ({{foreach (i, gift) gifts()}} comme je l'ai vu dans d'autres exemples).

J'utilise le dernière fichier knockout.js. J'utilise jQuery 1.4.3. J'utilise http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js pour le moteur Templating. Cependant, je l'ai également essayé en utilisant le même fichier tmpl.js qui est inclus sur le site Web de knockous.js, et j'obtenir les mêmes résultats.

  

Lorsque vous utilisez jQuery Templating, par la spécification actuelle, le modèle ne rend pas.

Le modèle jQuery tags Documentation se trouve ici: http: // api. jquery.com/category/plugins/templates/template-tags/

Dans quelqu'un de cas a été confus au sujet de mon modèle exact. Si je remplace {{foreach (i, gift) gifts}} avec {{foreach gift}}, le modèle rend et se comporte correctement, mais je ne peux pas utiliser les déclarations de ${property} indigènes jQuery pour quoi que ce soit.

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

J'adopter une approche différente. J'utiliser la ligne suivante:

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

au lieu de:

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

De cette façon, vous ne avez pas besoin d'utiliser la ligne de {{each (i, gift) gifts}} dans le modèle qui vous donne du mal.

Answer 2

{{each gifts}} au lieu de {{each (i, gift) gifts}} fera l'affaire.