Question

我的HTML：

<ul style="padding-left: 0px;" data-template="GallaryTemplate" data-bind="source: Job.Images"></ul>
<script id="GallaryTemplate" type="text/x-kendo-template">
    <li style="display: inline">
        <img data-bind="attr: { src: Path }, click: clickHandler" style="width: 50px; height: 75px;" />
    </li>
</script>

我的观点模型：

{
   "ActiveImage":0,
   "Job":{
      "JobUID":100,
      "PatientFirstName":"Corey",
      "PatientLastName":"Ogburn",
      "PatientGender":1,
      "Images":[
         {
            "ImageUID":1,
            "JobUID":100,
            "Path":"/data/A.png"
         },
         {
            "ImageUID":2,
            "JobUID":100,
            "Path":"/data/B.png"
         },
         {
            "ImageUID":3,
            "JobUID":100,
            "Path":"/data/C.png"
         }
      ]
   },
   clickHandler: function() {...}
}

对于我的一般名称为clickHandler，如何获取我点击的图像的索引？ Knockout有一个$index，什么是剑道等同？

Answer 1

您可以参考e.data e clickHandler的参数中的数据。

示例：

clickHandler: function(e) {
    console.log("data", e.data);
}

在此处查看：http://jsfiddle.net/OnaBai/XNcmt/74/

编辑您还可以考虑将click处理程序设置为li元素，然后您可以将LarsHöppner建议的解决方案简化为$(e.delegateTarget).index()：

模板：

<ul style="padding-left: 0px;" data-template="GallaryTemplate" data-bind="source: Job.Images" id="list"></ul>
<script id="GallaryTemplate" type="text/x-kendo-template">
    <li style="display: inline" data-bind="click: clickHandler">
        <img data-bind="attr: { src: Path }" style="width: 50px; height: 75px;" />
    </li>
</script>

JavaScript点击处理程序：

clickHandler: function(e) {
    alert("li index: " + $(e.delegateTarget).index());
}

请在此处查看：http://jsfiddle.net/OnaBai/XNcmt/75/

Answer 2

正如OnaBai所说，你可以检查传递给点击处理程序的事件;要获取索引，您可以查看e.target，这是用户单击的元素，并获取如下索引：

clickHandler: function(e) {
    var index = $(e.target).closest("li").index();
}

如果你需要数组中的索引而不是元素的索引，你也可以这样做：

clickHandler: function (e) {
    var index = e.data.parent().indexOf(e.data);
}

（demo）

知道使用源/模板绑定时单击了哪个元素？

2 个答案: