Использование Knockout.js с новейшими файлами jQuery и asp.net mvc

Question

Я пытаюсь использовать Knockout.js с asp.net mvc 3.0 (заголовок отдал его, не так ли?!)

http://knockout.js.com.

Я бегу в некоторые проблемы (более связанные с новым двигателем jQuery Tmpl, чем asp.net mvc 3.0).

Я использую пример программы Стива Сандерсона в моем тесте и имею по большей части Реплицировал его результаты с новым двигателем Razor View (я не верю, что бритве имеет что-то делать с моей проблемой).

http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

Однако я хочу сделать больше с естественный Связывание jQuery, вместо атрибутов связывания HTML. Это подробно описано на уроке нокаута.http://knockoutjs.com/documentation/template-binding.html.

Однако я не могу воспроизвести это, как это объясняет. Я покажу ниже мой код просмотра. Моя проблема исходит от того, что {{foreach (i, gift) gifts}} не работает. Я пробовал много вариантов ( {{foreach (i, gift) gifts()}} Как я видел в других примерах).

Я использую самый последний knockout.js файл. Я использую jQuery 1.4.3. Я использую http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js Для шаблонного двигателя. Тем не менее, я также попробовал это, используя то же самое tmpl.js Файл, который включен на сайт Nickous.js, и я получаю те же результаты.

При использовании шаблонов jQuery на текущую спецификацию шаблон не делает.

Документация Tags Tags JQuery Techs находится здесь: http://api.jquery.com/category/plugins/templates/template-tags/

В случае, если кто-то был путаницей о моей точной модели. Если я заменил {{foreach (i, gift) gifts}} с {{foreach gift}}, Затем модель рендерирует и ведет себя правильно, но я не могу использовать родной jQuery ${property} Декларации на что угодно.

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

Я бы подошел к этому по-другому. Я бы использовал следующую строку:

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

вместо:

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

Таким образом, вам не нужно использовать {{each (i, gift) gifts}} линия в шаблоне, которая дает вам неприятности.

Answer 2

{{each gifts}} вместо {{each (i, gift) gifts}} сделаю трюк.