如何为Orchard Layout创建自定义容器元素？

通过查看Mainbit的layout模块，我了解了如何制作容器和可包含元素。容器元素需要一些其他的Angular代码才能使它们起作用。我仍然需要帮助弄清楚如何限制可以包含哪些元素！

脚本/LayoutEditor.js

我必须用指令扩展LayoutEditor模块，以容纳与我的元素有关的所有Angular东西：

angular
.module("LayoutEditor")
.directive("orcLayoutProcedure", ["$compile", "scopeConfigurator", "environment",
    function ($compile, scopeConfigurator, environment) {
        return {
            restrict: "E",
            scope: { element: "=" },
            controller: ["$scope", "$element",
                function ($scope, $element) {
                    scopeConfigurator.configureForElement($scope, $element);
                    scopeConfigurator.configureForContainer($scope, $element);
                    $scope.sortableOptions["axis"] = "y";
                }
            ],
            templateUrl: environment.templateUrl("Procedure"),
            replace: true
        };
    }
]);

脚本/Models.js

Orchard的LayoutEditor的提供者可以使用：

var LayoutEditor;
(function (LayoutEditor) {

LayoutEditor.Procedure = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
    LayoutEditor.Element.call(this, "Procedure", data, htmlId, htmlClass, htmlStyle, isTemplated);
    LayoutEditor.Container.call(this, ["Grid", "Content"], children);

    //this.isContainable = true;
    this.dropTargetClass = "layout-common-holder";

    this.toObject = function () {
        var result = this.elementToObject();
        result.children = this.childrenToObject();
        return result;
    };
};

LayoutEditor.Procedure.from = function (value) {
    var result = new LayoutEditor.Procedure(
        value.data,
        value.htmlId,
        value.htmlClass,
        value.htmlStyle,
        value.isTemplated,
        LayoutEditor.childrenFrom(value.children));
    result.toolboxIcon = value.toolboxIcon;
    result.toolboxLabel = value.toolboxLabel;
    result.toolboxDescription = value.toolboxDescription;
    return result;
};

LayoutEditor.registerFactory("Procedure", function (value) {
    return LayoutEditor.Procedure.from(value);
});

})(LayoutEditor || (LayoutEditor = {}));

具体来说，这是告诉元素可以包含哪些内容的行：

LayoutEditor.Container.call(this, ["Grid", "Content"], children);

ResourceManifest.cs

然后，我制作了一个资源清单，以轻松地在Orchard的模块中使它们可用。

public class ResourceManifest : IResourceManifestProvider
{
    public void BuildManifests(ResourceManifestBuilder builder)
    {
        var manifest = builder.Add();
        manifest.DefineScript("MyModule.Models").SetUrl("Models.js").SetDependencies("Layouts.LayoutEditor");
        manifest.DefineScript("MyModule.LayoutEditors").SetUrl("LayoutEditor.js").SetDependencies("Layouts.LayoutEditor", "MyModule.Models");
    }
}

默认情况下，.SetUrl()指向模块/主题中的/ Scripts文件夹。

处理程序/LayoutEditorShapeEventHandler.cs

最后，我添加了此处理程序，以在使用布局编辑器的管理页面上加载脚本。

public class LayoutEditorShapeEventHandler : IShapeTableProvider
{
    private readonly Work<IResourceManager> _resourceManager;
    public LayoutEditorShapeEventHandler(Work<IResourceManager> resourceManager)
    {
        _resourceManager = resourceManager;
    }

    public void Discover(ShapeTableBuilder builder)
    {
        builder.Describe("EditorTemplate").OnDisplaying(context =>
        {
            if (context.Shape.TemplateName != "Parts.Layout")
                return;

            _resourceManager.Value.Require("script", "MyModule.LayoutEditors");
        });
    }
}

希望这会在将来对某人有所帮助。但是，我仍然不知道如何做到这一点，以使我的容器仅包含我的Containable或我的Containable仅允许其自身包含在我的Container中。似乎调整LayoutEditor.Container.call(this, ["Grid", "Content"], children);就足以实现这一目标，但事实并非如此。仍然欢迎更多帮助。