1

Durandal でウィザード ウィジェットを作成していますが、次のように使用したいと考えています。

        <div data-bind="wizard: options">
            <!-- Step 1 -->
            <span data-part="step-header-1">
                Step 1
            </span>
            <div data-part="step-content-1">
                step content here
            </div>

            <!-- Step 2 -->
            <span data-part="step-header-2">
                Step 2
            </span>
            <div data-part="step-content-2">
                step content here
            </div>
        </div>

これが実際のウィジェットです (簡潔にするために省略しています)。

<div class="wizard-container">

    <ul class="steps" data-bind="foreach: steps">
        <li>
            <span data-bind="html: heading"></span>
        </li>
    </ul>

    <!-- ko foreach: steps -->
    <div class="wizard-step" data-bind="css: { active: isActive }">
        <div data-bind="html: content">

        </div>
    </div>
    <!-- /ko -->

</div>

jQuery を使用してデータ パーツを取得し、データ パーツの内部 HTML をステップ モデルのプロパティに割り当て、html バインディングを使用してコンテンツを各ステップにバインドします。これは DOM 側で機能しますが、このようにすると、ステップ コンテンツがデータ バインドされないことを意味します。コンテンツをバインドしない html バインディングを使用しているためだと確信しています。

各ステップを新しいビューに分割せずに、Durandal ウィジェットでこれを行う方法はありますか?

4

2 に答える 2

5

これは、従来のデュランダル マスター/ディテール アプローチをタブ ウィジェットと組み合わせて使用​​する実装です。タブ ウィジェットはタブ機能のみを実装しますが、Master はそれにプッシュされるものを制御し、Detail はそれ自体の動作/レイアウトを制御します。

主人

ビューモデル

define(['./tab', 'plugins/widget', 'knockout'], function (Tab, widget, ko) {

    return {
        tabs: ko.observableArray([
            new Tab('Durandal', 'A ...', true),
            new Tab('UnityDatabinding', 'A ...'),
            new Tab('Caliburn.Micro', 'C ...')
        ]),
        addNewTab: function() {
            this.tabs.push(new Tab('New Tab ', 'A test tab.'));
        }
    };
});

意見

<div>
    <h1>Tabs sample</h1>
    <!-- ko widget : {kind: 'tabs', items : tabs} -->
    <!-- /ko -->

    <button class="btn" data-bind="click: addNewTab">Add</button>
</div>

詳細

ビューモデル

define(['durandal/events', 'knockout'], function(events, ko) {
    return function(name, content, isActive) {
        this.isActive = ko.observable(isActive || false);
        this.name = name;
        this.content = content;
    };
});

見る

<div>
    <div data-bind="html: description"></div>
</div>

タブ ウィジェット

ビューモデル

define(['durandal/composition', 'jquery'], function(composition, $) {

    var ctor = function() { };

    ctor.prototype.activate = function(settings) {
        this.settings = settings;
    };

    ctor.prototype.detached = function() {
        console.log('bootstrap/widget/viewmodel: detached', arguments, this);
    };

    ctor.prototype.toggle = function(model, event){
        this.deactivateAll();
        model.isActive(true);

    };

    ctor.prototype.deactivateAll = function(){

        $.each(this.settings.items(), function(idx, tab){
            tab.isActive(false);
        });
    };



    return ctor;
});

意見

<div class="tabs">
    <ul class="nav nav-tabs" data-bind="foreach: { data: settings.items }">
        <li data-bind="css: {active: isActive}">
            <a data-bind="text: name, click: $parent.toggle.bind($parent)"></a>
        </li>
    </ul>

    <div class="tab-content" data-bind="foreach: { data: settings.items}">
        <div class="tab-pane"  data-bind="html: content, css: {active: isActive}"></div>
    </div>
</div>

ライブ バージョンはhttp://dfiddle.github.io/dFiddle-2.0/#extras/defaultで入手できます。自由にフォークしてください。

于 2013-09-21T09:10:38.213 に答える