Javascript 如何在winjs的repeater元素中绑定click事件？

我可以通过以下方式创建转发器：

    <div class="gameField" id="gameField" data-win-control="WinJS.UI.Repeater" data-win-options="{ data: GameField.cells}">
        <div class="gameCell">
            <img data-win-bind="src: symbol GameField.cellSymbolToImg" width="100" height="100" />
        </div>
    </div>

和js

    var Cell = WinJS.Class.define(function(number) {
    this.number = number;
    this.symbol = "";
});

var getCellsList = function () {
    var cells = [];
    for (var i = 1; i < 10; i++) {
        var cell = new Cell(i);

        cells.push(cell);
    }
    return cells;
};

var cellsList = new WinJS.Binding.List(getCellsList());
WinJS.Namespace.define("GameField", {
    cells: cellsList,
    cellSymbolToImg: WinJS.Binding.converter(function (symbol) {
        return symbol == "" ? "" : "symbol_" + symbol + ".png";
    })
});

var Cell=WinJS.Class.define（函数（编号）{
这个数字=数字；
此符号为“”；
});
var getCellsList=函数（）{
var单元格=[]；
对于（变量i=1；i<10；i++）{
var单元=新单元（i）；
细胞。推（细胞）；
}
返回单元；
};
var cellsList=new WinJS.Binding.List（getCellsList（））；
定义（“游戏场”{
细胞：细胞列表，
cellSymbolToImg:WinJS.Binding.converter（函数（符号）{
返回symbol==“”？“”：“symbol”+symbol+.png”；
})
});

---

但是，如何将click事件绑定到某个函数，以便从该函数中访问底层单元格对象呢？

使用function.bind方法可以很简单地做到这一点，您甚至可以在单元格类中直接使用处理程序

var Cell = WinJS.Class.define(function(number) {
    var e = document.createElement("div"); //...and initialize however.
    this.element = e;
    e.winControl = this;

    this.number = number;
    this.symbol = "";
    //Also consider using pointerDown event here instead of click; might respond quicker
    e.addEventListener("click", this._click.bind(this));
}, {
    //Instance members
    _click: function (e) {
        //Your handler. "this" will be the instance of Cell that was clicked
    }
});

---

如您所见，this.\u click函数引用实例成员单元格。\u click。调用此函数的bind方法就是在该方法中指定要用作“this”的确切对象的方式。如果不调用.bind（this），处理程序仍将被调用，但“this”将是全局上下文，而不是您关心的对象。

对不起，我从未运行过您的解决方案，但我 我找到了另一种在中继器中绑定单击的方法。我将只是发布我的导航样本

<ul data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: navigations">
    <li data-win-control="Navigation.NavigationItem" data-win-bind="winControl.data: this">
        <span data-win-bind="textContent: Name; className: Selected;"></span>
        <span data-win-bind="textContent: Selected;"></span>
    </li>
</ul>

添加的项目如下所示：

WinJS.Namespace.define("Navigation", {
    dataBinding: WinJS.Binding.as({
        navigations: new WinJS.Binding.List([]),
    }),

    NavigationItem: WinJS.Class.define(
            function (element, options) {
                this.element = element;
                this.element.onclick = function (event) {                        
                    var item = this.winControl.data;
                    // Handle your onclick here
                    // for example: 
                    item.clickHandler();
                };
            }
        ),
});

Navigation.dataBinding.navigations.push(WinJS.Binding.as({
    Name: "Home",
    Page: "/pages/home/home.html",
    // more... for example:
    clickHandler: function() {
       // Do Something
    };
}));

---

谢谢这正是我想要的。你能提供更多关于你是如何在单元格构造函数中调用addEventListener的信息吗？谢天谢地，我忽略了那部分。我更正了上面的回答，以显示构造函数正在创建要添加侦听器的元素。如果我通过

WinJS.UI.Repeater

自动绑定元素，这将如何工作？因为绑定发生在这里：

select.setAttribute（'data-win-bind'，'value:version；onchange:versionChangeHandler'）

，目的是绑定到

选项卡中当前的
读卡器
对象。读卡器

数组正在中继器中使用：

var rptr=new WinJS.UI.repeater（rptrDiv，{“data”：tab.readers，“template”：template}）。（
versionChangeHandler
是
Reader
类型的类方法（使用TypeScript））