Question

我有一个简单的模板块：

<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>

with knockout 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参数我做错了什么？

添加包含（按顺序），＃selectCust块可以在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敲门的问题吗？

Answer 1

你试过这个吗？

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

根据淘汰文档“注1”，你需要在循环中用$ parent作为前缀。 Link

修改顺便说一下，我想我会在这里分享一下：

“请注意，截至2011年12月，jQuery.tmpl已不再处于积极开发状态。在适当的时候，它将由JsRender取得成功，目前尚未进入测试阶段。” LINK

Answer 2

我立刻看到的一个问题是div“class”部分缺少一个结束“div”标签。我怀疑这是在DOM中创建格式错误的对象。

JQuery tmpl knockout.js点击不通过项目

2 个答案: