在 Knockout.JS 中更新视图模型后调用视图函数

Question

我使用出色的 Cycle.js 插件创建了一个简单的内容旋转器，它从我的 Knockout.JS 视图模型属性（在本例中为 appViewModel.mediaPlayer）获取它的内容：

例如

  var testData = [{ url: "media/1.png" }, { url: "media/2.jpg"}];

    var appViewModel =
    {
        mediaPlayer: new ko.observableArray(testData)
    };

    ko.applyBindings(appViewModel);

这是使用 JQuery Tmpl 在视图中呈现的，例如

 <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
        });

这很好用，但是当我更新我的视图模型媒体播放器内容时，循环插件停止工作......这不是问题，因为对 cycle() 的简单调用将再次启动它。

但是，我的问题是，调用 cycle() 以更新视图的最佳位置在哪里？我想我可以订阅 mediaPlayer 更改，只需在需要时调用该方法，但这意味着我必须将 JQuery 元素/视图逻辑放在感觉错误的视图模型中（也许我试图过于纯粹！） .

简而言之，如何在视图模型不知道视图函数的情况下从视图模型触发视图中的函数？在 Silverlight/WPF 中，这可以通过 XAML 中的触发器实现，但我不确定如何使用 Knockout.JS 实现相同的分离

Answer 1

我认为最好使用绑定处理程序来执行此操作，这也将允许您在重新渲染内容时正确处理插件。

你的例子（它会在 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);​