JQuery tmpl knockout.js нажмите не проходящий элемент - PullRequest
Новая
       21

JQuery tmpl knockout.js нажмите не проходящий элемент

0 голосов
/ 14 февраля 2012

У меня есть простой шаблон блока: 

<script id="selectedCust" type="text/x-jquery-tmpl">
{{each people}}
<div class="section" personid="${Personid}" >
    <div class="sectionActions">
        <div>
           <a class="action" href="#" data-bind='click: removePerson'>Remove</a>
        </div>
   </div>
</div>
{{/each}}
</script>

Простой блок HTML: 

<div id="customersArea" data-bind="template: 'selectedCust'">
</div>

с нокаутом js: 

 function viewModel() {
            var self = this;
            self.people = ko.observableArray();
            self.removePerson = function (person, ev) {
                self.people.remove(person);
            };
            self.setPeople = function (ppl) {
                var len = ppl.length;
                for (var i = 0; i < len; i++) {
                    this.people.push(ppl[i]);
                }
            };
        }

    var mainViewModel = new viewModel();
    ko.applyBindings(mainViewModel, $("#customersArea")[0]);

Я могу установить людей и увидеть привязку данных, однако, когда вызывается removePerson, параметр person всегда mainViewModel, а не экземпляр. Когда я пытаюсь получить $ root.remove, я получаю те же результаты, что и попытка $ parent.remove, которую я получаю, $ parent не определена.

Не прибегая к параметру ev, что я делаю не так?

Добавление Включает (по порядку), блок #selectedCust может быть после этого или сразу после knockout.js, и он все еще выдает ошибку в $ parent: 

<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>
<script src="/Scripts/knockout-2.0.0.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-blockUI.js" type="text/javascript"></script>

Я просто изменил его на шаблон ko.js: 

<div class="section" data-bind="attr: { 'personid': PersonId }" >
    <div class="sectionActions">
        <div><a class="action" href="#" data-bind='click: $parent.removePerson'>Remove</a></div>
    </div>
</div>

и это работает ... Так это проблема с нокаутом, использующим tmpl?

Ответы [ 2 ]

1 голос
/ 14 февраля 2012

Вы пробовали это? 

<div><a class="action" href="#" data-bind='click: $parent.removePerson'>Remove</a></div>

В соответствии с нокаутирующей документацией «Примечание 1», вам нужно предварять его предваряющим знаком $ parent в цикле. Ссылка

EDIT Кстати, я решил поделиться этим здесь:

«Обратите внимание, что по состоянию на декабрь 2011 года jQuery.tmpl больше не находится в активной разработке. Со временем его сменит JsRender, который в настоящее время еще не находится в бета-версии». LINK

0 голосов
/ 14 февраля 2012

Одна проблема, которую я сразу вижу, это то, что у div с классом "section" отсутствует закрывающий тег "div". Я подозреваю, что это создает неправильно сформированные объекты в DOM.

...