Utilizzando Knockout.js con più nuova jQuery file e ASP.NET MVC

Question

Sto tentando di usare Knockout.js con ASP.NET MVC 3.0 (titolo ha dato via, non è vero?!)

http://knockout.js.com

Sono in esecuzione in alcuni problemi (più relativi al nuovo jQuery Tmpl motore di ASP.NET MVC 3.0).

Sto usando Esempio di programma di Steve Sanderson nel mio test, e hanno per lo più replicato i suoi risultati con il nuovo rasoio View Engine (non credo Razor ha nulla a che fare con il mio problema).

http: // blog .stevensanderson.com / 2010/07/12 / editing-a-lunghezza variabile-list-ko-style /

Comunque io voglio fare di più con il legame naturale jquery, invece degli attributi HTML vincolanti. Questo è descritto in dettaglio sul tutorial di eliminazione diretta. http://knockoutjs.com/documentation/template-binding.html

Tuttavia non sono in grado di riprodurre questo come si spiega. Vi mostrerò di seguito la mia vista Codice. Il mio problema è venuta dal fatto che {{foreach (i, gift) gifts}} non funziona. Ho provato molte varianti ({{foreach (i, gift) gifts()}} come ho visto in altri esempi).

Sto usando il ultima file knockout.js. Sto usando jQuery 1.4.3. Sto usando http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js per motore di template. Tuttavia, ho anche provato questo utilizzando lo stesso file tmpl.js che è incluso sul sito web di knockous.js, e ottenere gli stessi risultati.

  

Quando si utilizza jQuery Templating, Per la specifica corrente, il modello non rende.

Il jQuery Template Tag documentazione si trova qui: http: // api. jquery.com/category/plugins/templates/template-tags/

Nel caso qualcuno era confuso circa il mio modello esatto. Se sostituisco {{foreach (i, gift) gifts}} con {{foreach gift}}, allora il modello rende e si comporta in modo corretto, ma non riesco a utilizzare le dichiarazioni ${property} nativi jQuery per qualsiasi cosa.

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

Vorrei affrontare questo in modo diverso. Vorrei utilizzare la seguente riga:

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

invece che:

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

In questo modo non avete bisogno di usare la linea {{each (i, gift) gifts}} nel modello che si sta dando problemi.

Answer 2

{{each gifts}} invece di {{each (i, gift) gifts}} farà il trucco.