Шаблон JQuery не обрабатывается - просто выплевывает необработанный текст - PullRequest
Новая
       26

Шаблон JQuery не обрабатывается - просто выплевывает необработанный текст

0 голосов
/ 31 марта 2012

Я пытаюсь проработать учебник Дункана Маккензи по knockout.js из MIX, и есть немного, где вы используете шаблон JQuery для каждого оператора - здесь это 

<script id="friendsTemplate" type="text/x-jquery-tmpl">
    <ul>
        {{each(index, friend) friends}}
         <li>${ friend.name }</li>
        {{/each}}
    </ul>
</script>

Когда я пытаюсь воссоздать этоон просто печатает необработанный текст из тегов неупорядоченного списка один раз и все.то есть 

{{each(index, friend) friends}}
    <li>${ friend.name }</li>
{{/each}}

Я подумал, что, возможно, я неправильно ссылался на файл шаблона, поэтому я добавил это на свою страницу (из примера, найденного на сайте JQuery). 

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

Яне так уж много парней из HTML / JQuery, так что извините, если это просто, но я пытался исправить это в течение получаса - я не понимаю, в чем проблема.

Спасибо!

Ответы [ 2 ]

2 голосов
/ 31 марта 2012

Кажется, вы не вызывали функцию tmpl в другом теге скрипта. Посмотрите пример на странице плагина jQuery.

{{each}} Шаблонный тег http://api.jquery.com/template-tag-each/

Возможно, вам понадобится добавить что-то вроде этого ... 

<script>
var friends = [
    { Name: "Mike", Languages: ["French"] },
    { Name: "Bill", Languages: [] }
];
$( "#friendsTemplate" ).tmpl( friends )
    .appendTo( "#friendsList" );
</script>
1 голос
/ 01 апреля 2012

На самом деле здесь происходит несколько проблем.Сначала у меня был неправильный порядок тегов.библиотека нокаута должна быть последней.Затем мне нужно было получить правильную версию библиотеки шаблонов JQuery.Вот как в конечном итоге трястись включения в теге script.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script>

Ответ Ларри верен в других ситуациях, однако я подозревал, что knockout.js позаботился об этой части для меня, и действительно, похоже, это так.Как только я получил правильные теги сценария, все заработало.Вот готовый код, вы можете создать новое приложение MVC и вставить его в домашний контроллер.

@{
    ViewBag.Title = "Home Page";
}

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script>

<h3>Details</h3>

<p>First Name: <input data-bind="value: firstName"/> </p>
<p>Last Name: <input data-bind="value: lastName"/> </p>
<p>Name: <span data-bind="text: fullName"/> </p>

<h2>Friends</h2>
<div data-bind="template: 'friendsTemplate'"></div>

<script id="friendsTemplate" type="text/html">
    <ul>
        {{each friends}}
         <li>${ name }</li>
        {{/each}}
    </ul>
</script>


<script type="text/javascript">
    function Friend(name) {
        return {
            name: ko.observable(name)
        };
    }

    var viewmodel = {
        firstName: ko.observable("bert"),
        lastName: ko.observable("bert"),
        friends: ko.observableArray([new Friend("Ralphie"), new Friend("Waldo")])
    };

    viewmodel.fullName = ko.dependentObservable(function () {
        return this.firstName() + " " + this.lastName();
    }, viewmodel);

    ko.applyBindings(viewmodel);
</script>

Я нашел эту документацию на сайте нокаутов.http://knockoutjs.com/documentation/template-binding.html см. Примечание 5 «Использование jQuery.tmpl, внешнего механизма шаблонов на основе строк», который я должен был найти вчера вечером.

Спасибо!Ken

...