Виджеты Durandal, динамические шаблонные части

Вот реализация, в которой используется традиционный подход Durandal master/detail в сочетании с виджетом Tab. Виджет вкладки реализует только функциональность табуляции, в то время как мастер контролирует то, что в него помещается, а деталь управляет своим поведением/макетом.

Владелец

Модель просмотра

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. Не стесняйтесь раскошелиться.

Как я и подозревал, проблема с неприменением моих привязок была связана с тем, что я использовал привязку html для установки содержимого шага. Когда Knockout устанавливает HTML, он не применяет к нему привязки.

Я написал свой собственный обработчик привязки HTML, который оборачивает HTML и вставляет его как DOM-узел — Knockout с радостью применит к этому привязки.

(function(window, $, ko) {
    var setHtml = function (element, valueAccessor) {
        var $elem = $(element);
        var unwrapped = ko.utils.unwrapObservable(valueAccessor());
        var $content = $(unwrapped);
        $elem.children().remove().end().append($content);
    };
    ko.bindingHandlers.htmlAsDom = {
        init: setHtml,
        update: setHtml
    };
}(window, jQuery, ko));

Обратите внимание, что это работает только тогда, когда значение привязки упаковано как узел, например, внутри тега div. Если нет, он не будет отображать его.