Question

背景

我是Umbraco的新手，正在创建我的第一个自定义网格编辑器。我正在尝试使用Umbraco自定义网格编辑器从我们的官方Web模板填充简单的图像轮播。我希望用户能够选择一个或多个图像并应用文本横幅（带或不带URL）。

问题

我有图像选择工作，但我不认为我是用最有效的方法做的。我从@Model获取生成的JSON对象，然后执行@ Model.node.node.node直到我到达图像URL。这看起来很脆弱，如果JSON发生变化，我的旋转木马就会被打破。

这是编辑器的AngularJS HTML：

<div ng-controller="imageCarousel.carouselController">
    <div>
        <div ng-show="control.value.carousel == undefined || control.value.carousel == ''">
            <i class="icon icon-add blue"></i>
            <a href="#" ng-click="pickImage()" prevent-default="">
                Add
            </a>
        </div>

        <div ng-show="control.value.carousel">
            <i class="icon icon-delete red"></i>
            <a href="#" ng-click="removeImage()" prevent-default="">
                Remove
            </a>
        </div>
    </div>

    <br />

    <ul ng-repeat="item in control.value.carousel">
        <li>
            {{item.id}}<br />
            <img src="{{item.properties[0].value.src}}" />
        </li>
    </ul>
</div>

这是控制器的样子：

angular.module("umbraco").controller("imageCarousel.carouselController",
    function ($scope, dialogService) {

        // Initialize the carousel array of images if it isn't there already
        if (!$scope.control.value) {
            $scope.control.value = {
                carousel: []
            };
        }

        // Populate the carousel array of images from the multi picker
        $scope.pickImage = function () {
            dialogService.mediaPicker({
                multiPicker: true,
                callback: function (data) {
                    //need $scope.control.value to work in a grid
                    angular.forEach(data, function (value, key) {
                        $scope.control.value.carousel.push(value);
                    })
                }
            });
        };

        // Set the carousel array to empty for now (need to figure out how to delete individual images)
        $scope.removeImage = function () {
            $scope.control.value = {
                carousel: []
            };
        };

    });

以下是Razor渲染器目前的样子：

inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

<pre>@Model</pre>

<div class="carousel owl-carousel carousel-content">
    @{
        foreach (var tmp in Model.value.carousel.Children())
        {
            <div class="item">
                <img src="@tmp.properties[0].value.src" />
                <div class="content-container">
                    <div class="content">
                        <h2>Large Hero Content</h2>
                    </div>
                </div>
            </div>
        }
    }
</div>

这是@Model的转储（对于单个图像）：

{
  "value": {
    "carousel": [
      {
        "properties": [
          {
            "id": 34,
            "value": {
              "src": "/media/1005/7834611966_e5efa3e3b2_o.jpg",
              "focalPoint": {
                "left": 0.47666666666666668,
                "top": 0.22546972860125261
              }
            },
            "alias": "umbracoFile",
            "editor": "Umbraco.ImageCropper"
          },
          {
            "id": 35,
            "value": "962",
            "alias": "umbracoWidth",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 36,
            "value": "768",
            "alias": "umbracoHeight",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 37,
            "value": "871793",
            "alias": "umbracoBytes",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 38,
            "value": "jpg",
            "alias": "umbracoExtension",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 41,
            "value": "",
            "alias": "linkText",
            "editor": "Umbraco.Textbox"
          },
          {
            "id": 40,
            "value": "",
            "alias": "linkTitle",
            "editor": "Umbraco.Textbox"
          },
          {
            "id": 39,
            "value": "",
            "alias": "linkURL",
            "editor": "Umbraco.Textbox"
          }
        ],
        "updateDate": "2017-02-15 11:53:06",
        "createDate": "2017-02-15 11:53:06",
        "published": false,
        "hasPublishedVersion": false,
        "owner": {
          "id": 0,
          "name": "xxx"
        },
        "updater": null,
        "contentTypeAlias": "bannerImage",
        "sortOrder": 4,
        "name": "7834611966_e5efa3e3b2_o.jpg",
        "id": 1088,
        "icon": "icon-slideshow color-orange",
        "trashed": false,
        "key": "fd1e3251-1597-4997-b795-f5c08c301519",
        "parentId": 1082,
        "alias": null,
        "path": "-1,1082,1088",
        "metaData": {},
        "isFolder": false,
        "thumbnail": "/media/1005/7834611966_e5efa3e3b2_o.jpg?width=500&mode=max&animationprocessmode=first",
        "image": "/media/1005/7834611966_e5efa3e3b2_o.jpg",
        "originalWidth": 962,
        "originalHeight": 768,
        "style": {
          "width": "173px",
          "height": "138px",
          "margin-right": "5px",
          "margin-bottom": "5px"
        },
        "thumbStyle": {
          "background-image": "url('/media/1005/7834611966_e5efa3e3b2_o.jpg?width=500&mode=max&animationprocessmode=first')",
          "background-repeat": "no-repeat",
          "background-position": "center",
          "background-size": "173px 138px"
        },
        "cssclass": "selected"
      }
    ]
  },
  "editor": {
    "name": "Image Carousel",
    "alias": "grid.imageCarousel",
    "view": "/App_Plugins/ImageCarousel/imageCarousel.html",
    "render": "/App_Plugins/ImageCarousel/imageCarouselRenderer.cshtml",
    "icon": "icon-layout",
    "config": {}
  },
  "active": true
}

问题

我可以使用任何内置函数而不是我拥有的 @ tmp.properties [0] .value.src 部分吗？将图像选择器设置为“单个”会中断该节点引用。

我仍然需要为每个图像应用标题/ URL，我认为我不能用多图像选择器来做到这一点。您可以看到“大型英雄内容”参考，这是可编辑文本（带有可选URL）的地方。

非常感谢任何帮助，谢谢！

Answer 1

没有人发表评论，但我想列出一个答案，以防它有助于某人。正如我所料，我只是过于复杂（当然，愚蠢）。您访问Umbraco属性的方式是通过＆＃34; mediaItem = Umbraco.Media（id）＆＃34;，然后＆＃34; linkText = @ mediaItem.GetPropertyValue（＆＃34; linkText）＆＃34;。

这是最终（工作）渲染器的样子：

let conf = &conf;
thread::spawn(move || {
    handle_client(stream, conf);
});

无法访问由Umbraco自定义网格编辑器生成的JSON节点

背景

问题

问题

1 个答案: