杜兰达尔小部件，动态模板化部件

Durandal widgets, dynamic templated parts

本文关键字：化部 动态 小部 杜兰达      更新时间：2023-09-26

我正在使用杜兰达尔构建一个向导小部件，我想像这样使用它：

        <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 小部件做到这一点，而无需将每个步骤分离到新视图中？

这是一个使用传统 Durandal 大纲/细节方法与 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 标签中。如果没有，它不会呈现它。

相关文章：