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

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属性的方式是通过“ mediaItem = Umbraco.Media（id）”，然后是“ linkText = @ mediaItem.GetPropertyValue（“ linkText）”。

最终的（工作中的）渲染器如下所示：

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

<div class="carousel owl-carousel carousel-content">
    @{
        foreach (var tmp in Model.value.carousel.Children())
        {
            <div class="item">
                @{
                    var id = @tmp.id.ToString();
                    var mediaItem = Umbraco.Media(id);
                    var linkText = @mediaItem.GetPropertyValue("linkText");
                    var linkUrl = @mediaItem.GetPropertyValue("linkUrl");
                    var linkTitle = @mediaItem.GetPropertyValue("linkTitle");
                }

                <img src="@mediaItem.url" />

                <div class="content-container">
                    <div class="content">
                        @if (!string.IsNullOrWhiteSpace(linkText))
                        {
                            <h2>@linkText</h2>
                        }

                        @if (!string.IsNullOrWhiteSpace(linkUrl))
                        {
                            <a class="btn btn-primary backdrop" href="@linkUrl">@linkTitle</a>
                        }
                    </div>
                </div>
            </div>
        }
    }
</div>