管理后台-第二部分：Custom sections in Umbraco 7 – Part 2 the views（翻译文档）

时间：2021-10-16 04:02:56

在上一篇文章中我们讨论了怎样在我们Umbraco7.0版本中去添加一个新的自定义的应用程序（或部分）和如何去定义一个树。现在我将给你展示你改何如添加视图，来使你的内容可以做一些更有意义的事情。

The routing

从我们添加过tree这个类之后，我们添加了PluginController(“CustomSection“)属性。Umbraco将客户端请求的路由加到app_plugins文件夹中。逻辑类似： /app_plugins/{applicationName}/{treeAlias}/{action}/，所以我们的例子中我们将寻找网址 /#/CustomSection/CustomSectionTree/edit/，还有Umbraco中寻找/app_plugins/customsection/backoffice/CustomSectionTree/edit.html来显示视图，所以让我们创建该文件。

The view

添加一下内容在新的文件edit.html中：

 <script>

     function CustomSectionEditController($scope, $routeParams) {

         $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };

         $scope.EditMode = function() {

             return $routeParams.create == 'true';

         };

     }

 </script>

 <div ng-controller="CustomSectionEditController">

     <umb-panel>

     <umb-header tabs="content.tabs">

         <div class="umb-headline-editor-wrapper span12 ng-scope">

             <h1 class="ng-binding">My custom section {{id}}</h1>

                </div>

     </umb-header>

     <umb-tab-view>

         <umb-tab id="tab1" rel="svensson">

         <div class="umb-pane">

             This is tab content for tab 1<br/>

            <p ng-show="EditMode()">

                    <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>

            </p>

         </div>

         </umb-tab>

         <umb-tab id="tab2" rel="kalle">

         <div class="umb-pane">

                     This is tab content for tab 2

          </div>

         </umb-tab>

     </umb-tab-view>

 </umb-panel>

 </div>

这段代码将给我们一个视图类似这样的：
管理后台-第二部分：Custom sections in Umbraco 7 – Part 2 the views（翻译文档）

即使我们可以在视图中添加普通的HTML，但是我选择包括一些AngularJS和一些Umbraco在AngularJS上的补充。umb-tab, umb-tab-view, umb-panel-elements都是在AngularJS核心概念中的一些指令。这些指令隐藏着复杂的逻辑来生成视图右边还有侧边。指令是非常强大的，可以用来重用的代码和在应用程序上的窗口小部件 - 我们可以忽略这些细节，关注上面的代码。

在脚本标记中，我创建一个常规的Javascript函数，将作为视图的控制器，这个函数把一个变量$scope作为参数，就像是视图和控制器之间的“粘合剂”。$scope是AngularJS中的一个变量，如果你之前使用过Angular这对你来说应该是很熟悉。自从Umbraco定制指令选项卡$scope.content.tabs，当创建这个选项卡的时候我们需要用一些静态数据填充这个属性 - 在这种情况下是“Tab1”和“Tab2”。

相关文章