Mit Knockout.js mit neuesten jQuery-Dateien und ASP.NET MVC

Question

Ich versuche, Knockout.js zu verwenden, um mit ASP.NET MVC 3.0 (Titel gab es weg, nicht wahr?!)

http://knockout.js.com

Ich laufe in einige Probleme (mehr im Zusammenhang mit dem neuen jQuery Tmpl Motor als ASP.NET MVC 3.0).

Ich bin mit Steve Sanderson Beispielprogramm in meinem Test, und habe meist repliziert seine Ergebnisse mit der neuen Razor Ansicht Engine (ich glaube nicht, dass Razor etwas mit meinem Problem zu tun hat).

http: // blog .stevensanderson.com / 2010/07/12 / Editieren-a-VLD-list-Knockout-style /

Allerdings will ich mehr mit der natürlich jquery Bindung anstelle der HTML-bindenden Eigenschaften zu tun. Dies wird im Detail auf Knockout Tutorial beschrieben. http://knockoutjs.com/documentation/template-binding.html

Allerdings bin ich nicht in der Lage, dies zu reproduzieren, wie es erklärt. Ich werde unter meinem Code anzeigen zeigen. Mein Problem kommt von der Tatsache, dass {{foreach (i, gift) gifts}} funktioniert nicht. Ich habe viele Varianten ({{foreach (i, gift) gifts()}} wie ich in anderen Beispielen gesehen haben) versucht.

Ich bin mit der letzten knockout.js Datei. Ich verwende jQuery 1.4.3. ich http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js bin mit Motor für Templating. Allerdings habe ich auch diese mit der gleichen tmpl.js Datei versucht, die auf knockous.js Webseite enthalten ist, und ich bekomme die gleichen Ergebnisse.

  

Wenn jQuery Templating mit, Per der aktuellen Spezifikation, wird die Vorlage nicht machen.

Das ist jQuery Template Schlagwörter Dokumentation gefunden Hier: http: // api. jquery.com/category/plugins/templates/template-tags/

Falls jemand wurde über mein genaues Modell verwirrt. Wenn ich {{foreach (i, gift) gifts}} mit {{foreach gift}} ersetzen, dann das Modell macht und verhält sich korrekt, aber ich kann nicht die jQuery nativen ${property} Erklärungen für alles verwendet werden.

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

Ich würde dies anders nähern. Ich würde verwenden Sie die folgende Zeile:

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

statt:

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

Auf diese Weise brauchen Sie nicht die {{each (i, gift) gifts}} Linie in der Vorlage zu verwenden, die Ihnen Probleme gibt.

Answer 2

{{each gifts}} statt {{each (i, gift) gifts}} den Trick.