Question

我有一个允许我传递数据部分的小部件。基于我是否将数据部分通知给该窗口小部件的实例，我想在窗口小部件中显示/隐藏某些内容。所以有可能在我的小部件viewmodel上检测是否为数据部分指定了什么？

Answer 1

小部件视图模型的activate方法传递settings对象（此代码来自Durandal sample application）：

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

在settings对象中，您可以检查parent属性，该属性将为您提供小部件绑定的节点：

<div data-bind="expander:{items:projects}"></div>

这应该允许您访问节点上的data-part属性。

Answer 2

您可以在小部件的composition事件回调中使用getParts模块的attached方法。见http://durandaljs.com/documentation/api#module/composition/method/getParts

// MyWidget viewmodel
define(['durandal/composition'], function (composition) {
    var widget = function() {
        var plugin = this;

        plugin.showSomething = function () {
            something.show();
        );

        // See http://durandaljs.com/documentation/Interacting-with-the-DOM    
        plugin.attached = function (view, parent) {
            // See http://durandaljs.com/documentation/api#module/composition/method/getParts
            var dataparts = composition.getParts(view);

            plugin.parts = {
                $partOne: $(dataparts.datapartnameone),
                $partTwo: $(dataparts.datapartnametwo)
            };

            if (plugin.parts.$partOne) {
                // An element with data-part="datapartnameone" was found in the host container
                plugin.showSomething();
            }
        };
    };

    return widget;
});

// Example host container

<div data-bind="MyWidget: {}">
    <span data-part="datapartnameone">My data-part</span>
</div>

检测小部件上的数据部分

2 个答案: