导航到其他选项卡时无法破坏挖空绑定 (MetroJS)
Unable to destroy knockout binding (MetroJS) when navigate to other tabs
我正在使用 typescript 和 Knockout。在我的示例中,我可以使用 kendo 自定义编辑器(例如淡入淡出或轮播)创建图块并设置事务。根据为图块设置的计时器,将显示数据。但是,当我导航到其他选项卡时,计时器事件会尝试查找不再可用的图块数据,从而导致抛出错误。我想确保在导航到其他选项卡时,必须销毁或取消绑定所有具有事务事件的图块。我试过使用 ko.utils.domNodeDisposal.addDisposeCallback(element, function () 但它永远不会被调用。
init: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any): void => {
tileState.editableTileInit(element, valueAccessor, viewModel);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
console.log("I have been called");
});
},
update: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any): void => {
tileState.editableTileUpdate(element, valueAccessor, viewModel);
}
init 方法将创建图块
if (viewModel.editMode() === true) LiveTiles.setupClickHandler(element, viewModel, true);
var sub = viewModel.editMode.subscribe(x => LiveTiles.setupClickHandler(element, viewModel, x));
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
sub.dispose();
TileEditor.destroyEditor(element, viewModel);
LiveTiles.destroyTile(element, viewModel);
});
如果用户在运行时更新磁贴,更新方法将更新磁贴。
TileEditor.destroyEditor(element, viewModel);
LiveTiles.createTile(element, viewModel);
if (LiveTiles.shouldRecreateClickHandler(viewModel) === true) {
LiveTiles.setupClickHandler(element, viewModel, viewModel.editMode());
}
Tile window
Error when navigated to other tabs
如果您想知道用户何时切换到另一个选项卡(通常,在 window 之外),您可以在 window
上捕获 blur
事件:
$(window).blur(() => console.log("window.blur"));
需要在所需的.ts 文件中调用这段代码。因此,无论何时用户导航,都会调用 dispose 方法,下面的代码将确保 metrojs css 将被删除。
$('.live-tile')['liveTile']("destroy", true);
我正在使用 typescript 和 Knockout。在我的示例中,我可以使用 kendo 自定义编辑器(例如淡入淡出或轮播)创建图块并设置事务。根据为图块设置的计时器,将显示数据。但是,当我导航到其他选项卡时,计时器事件会尝试查找不再可用的图块数据,从而导致抛出错误。我想确保在导航到其他选项卡时,必须销毁或取消绑定所有具有事务事件的图块。我试过使用 ko.utils.domNodeDisposal.addDisposeCallback(element, function () 但它永远不会被调用。
init: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any): void => {
tileState.editableTileInit(element, valueAccessor, viewModel);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
console.log("I have been called");
});
},
update: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any): void => {
tileState.editableTileUpdate(element, valueAccessor, viewModel);
}
init 方法将创建图块
if (viewModel.editMode() === true) LiveTiles.setupClickHandler(element, viewModel, true);
var sub = viewModel.editMode.subscribe(x => LiveTiles.setupClickHandler(element, viewModel, x));
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
sub.dispose();
TileEditor.destroyEditor(element, viewModel);
LiveTiles.destroyTile(element, viewModel);
});
如果用户在运行时更新磁贴,更新方法将更新磁贴。
TileEditor.destroyEditor(element, viewModel);
LiveTiles.createTile(element, viewModel);
if (LiveTiles.shouldRecreateClickHandler(viewModel) === true) {
LiveTiles.setupClickHandler(element, viewModel, viewModel.editMode());
}
Tile window
Error when navigated to other tabs
如果您想知道用户何时切换到另一个选项卡(通常,在 window 之外),您可以在 window
上捕获 blur
事件:
$(window).blur(() => console.log("window.blur"));
需要在所需的.ts 文件中调用这段代码。因此,无论何时用户导航,都会调用 dispose 方法,下面的代码将确保 metrojs css 将被删除。
$('.live-tile')['liveTile']("destroy", true);