knockout.js - 在 Knockout.JS 中的 View 模型更新后调用 View 函数

Question

我使用优秀的 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 实现相同的分离

Answer 1

我认为最好使用 bindinghandlers 来执行此操作，这也将允许您在重新呈现内容时正确处置插件。

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