2

優れた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);

これは、JQueryTmplを使用してビューにレンダリングされます。

 <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（）を呼び出すだけで再開されるため、これは問題ではありません。

ただし、私の質問は、ビューを更新するためにcycle（）を呼び出すのに最適な場所はどこですか？必要に応じてメソッドを呼び出すだけで、mediaPlayerの変更をサブスクライブできると思いましたが、これは、JQuery要素/ビューロジックをビューモデルに配置する必要があることを意味します。 。

つまり、ビューモデルがビュー関数について知らなくても、ビューモデルからビューの関数をトリガーするにはどうすればよいですか？Silverlight / WPFでは、これはXAMLのトリガーで可能でしたが、Knockout.JSを使用して同じ分離を実現する方法がわかりません。

4

1 に答える 1

3

バインディングハンドラーを使用してこれを行う方が良いと思います。これにより、コンテンツが再レンダリングされるときにプラグインを適切に破棄することもできます。

あなたの例（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>

</ p>

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);​
于 2012-04-11T21:51:30.360 に答える