![](/img/trans.png)
[英]Can I bind a click event to the stage and a doubleclick to an element within it?
[英]How can I bind click event in repeater element in winjs?
我可以通过以下方式创建转发器:
<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";
})
});
但是,如何将click事件绑定到某个函数,以便可以从该函数内部访问基础单元对象?
使用function.bind方法很简单,甚至可以将处理程序直接放在Cell类中。
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._click函数引用实例成员Cell._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>
如您所见,我创建了一个非常简单的控件,并将转发器项与“ data-win-bind =“ winControl.data:this”绑定在一起。
命名空间如下所示:
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
};
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.