我使用优秀的 Cycle.js 插件创建了一个简单的内容旋转器,它从我的 Knockout.JS View 模型属性(本例中为 appViewModel.mediaPlayer)获取内容:
例如
var testData = [{ url: "media/1.png" }, { url: "media/2.jpg"}];
var appViewModel =
{
mediaPlayer: new ko.observableArray(testData)
};
ko.applyBindings(appViewModel);
这是使用 JQuery Tmpl 例如在 View 中呈现的
<script id="mediaPlayerTemplate" type="text/template">
<img src=${url} />
</script>
<div class="adContainer" data-bind="template: {name: 'mediaPlayerTemplate', foreach: mediaPlayer}">
</div>
要开始图像转换,我只需调用 Cycle 插件方法“cycle”:
$('.adContainer').cycle({
fx: 'fade',
timeout: 1000,
speed: 500
});
这很好用,但是当我更新我的 View 模型媒体播放器内容时,循环插件停止工作...这不是问题,因为简单调用 Cycle() 将再次启动它。
但是,我的问题是,调用 Cycle() 来更新 View 的最佳位置在哪里?我想我可以订阅 mediaPlayer 更改,只需在需要时调用该方法,但这意味着我必须将 JQuery 元素/ View 逻辑放入 View 模型中,这感觉不对(也许我太纯粹了!) .
简而言之,如何在 View 模型不知道 View 函数的情况下从 View 模型触发 View 中的函数?在 Silverlight/WPF 中,这可以通过 XAML 中的触发器实现,但我不确定如何使用 Knockout.JS 实现相同的分离
最佳答案
我认为最好使用绑定(bind)处理程序来执行此操作,这也将允许您在重新渲染内容时正确处置插件。
您的示例(它将在 5 秒后更改周期):
http://jsfiddle.net/nickolsky/uXDUA/2/
HTML:
<script id="mediaPlayerTemplate" type="text/template">
<img src=${url} />
</script>
<div data-bind="template: {name: 'mediaPlayerTemplate', foreach: mediaPlayer}, cycle: { fx: 'fade', timeout: 1000, speed: 500 }, cycleLinked: mediaPlayer">
</div>
JAVASCRIPT:
ko.bindingHandlers.cycle = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$element = $(element);
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
//console.log('cycle_init');
var _starting = false;
var _cycle = function() {
if(_starting) return;
_starting = true;
//console.log('cycle_create');
$element.hide();
setTimeout(function() { $(element).cycle(options); $element.show(); _starting = false; }, 0);
};
var subscription = allBindingsAccessor().cycleLinked.subscribe(_cycle);
//handle disposal
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
//console.log('cycle_destroy');
$element.cycle("destroy");
subscription.dispose();
});
_cycle();
}
};
var testData = [{
url: "http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"},
{
url: "http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"}];
var appViewModel = {
mediaPlayer: new ko.observableArray(testData)
};
ko.applyBindings(appViewModel);
setTimeout(function() {
appViewModel.mediaPlayer.push({url: "http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"});
appViewModel.mediaPlayer.push({url: "http://cloud.github.com/downloads/malsup/cycle/beach4.jpg"});
}, 5000);
关于knockout.js - 在 Knockout.JS 中 View 模型更新后调用 View 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10113006/