管理后台-第二部分:Custom sections in Umbraco 7 – Part 2 the views(翻译文档)
在上一篇文章中我们讨论了怎样在我们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>
这段代码将给我们一个视图类似这样的:
即使我们可以在视图中添加普通的HTML,但是我选择包括一些AngularJS和一些Umbraco在AngularJS上的补充。umb-tab, umb-tab-view, umb-panel-elements都是在AngularJS核心概念中的一些指令。这些指令隐藏着复杂的逻辑来生成视图右边还有侧边。指令是非常强大的,可以用来重用的代码和在应用程序上的窗口小部件 - 我们可以忽略这些细节,关注上面的代码。
在脚本标记中,我创建一个常规的Javascript函数,将作为视图的控制器,这个函数把一个变量$scope作为参数,就像是视图和控制器之间的“粘合剂”。$scope是AngularJS中的一个变量,如果你之前使用过Angular这对你来说应该是很熟悉。自从Umbraco定制指令选项卡$scope.content.tabs,当创建这个选项卡的时候我们需要用一些静态数据填充这个属性 - 在这种情况下是“Tab1”和“Tab2”。
管理后台-第二部分:Custom sections in Umbraco 7 – Part 2 the views(翻译文档)的更多相关文章
- Umbraco(6)-Creating More Pages Using the Master - Part 2(翻译文档)
创建一个Contact Us页面 我们将创建一个新的”联系我们“页面,在该页面我们将放置简单的联系信息.对于添加这个功能你可能想替换为一个完全成熟的形式. 一些有效的解决方案: 使用表面控制器构建自己 ...
- R自动数据收集第二章HTML笔记1(主要关于handler处理器函数和帮助文档所有示例)
本文知识点: 1潜在畸形页面使用htmlTreeParse函数 2startElement的用法 3闭包 4handler函数的命令和函数体主要写法 5节点的丢弃,取出,取出标签名称.属性.属 ...
- Umbraco(5)-Creating Master Template Part 1(翻译文档)
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco5-creating-master-template-par ...
- Umbraco(4)-Outputting the Document Type Properties(翻译文档)
翻译原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco4outputting-the-document-typ ...
- Umbraco(2) - Creating Your First Template and Content Node(翻译文档)
创建(编辑)你的第一个模板(Template) 展开 Settings > Templates文件夹 - 然后你应该看到子节点名为"Homepage" - 这是我们在创建Do ...
- Umbraco(1) - Document Types(翻译文档)
Document Types Data first nothing in = nothing out! 任何网站的第一步是创建一个"Document Type"-几次安装后你会熟悉 ...
- 管理后台-第一部分:Creating custom sections in Umbraco 7 - Part 1(翻译文档)
在Umbraco上每个部分都可以被称为一个应用程序,所以这些部分和应用程序基本上是一样的.我们首先要做的事情是需要创建应用程序.在这个例子中,我不会去摆弄xml文件或是数据库——我将使用类来创建我的内 ...
- FreeRTOS官方翻译文档——第二章 队列管理
2.1 概览基于 FreeRTOS 的应用程序由一组独立的任务构成——每个任务都是具有独立权限的小程序.这些独立的任务之间很可能会通过相互通信以提供有用的系统功能.FreeRTOS 中所有的通信与同步 ...
- Umbraco(3) - CSS & Javascript(翻译文档)
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
随机推荐
- magiczoom 插件去版本(放大镜效果)
在放大镜效果中代码中有 Please upgrade to full version of Magic Zoom Plus™ 去除办法: 在 magiczoom 去版本 magiczoomplus.j ...
- 可执行jar包的maven配置
待整理 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or ...
- Plan04.学习与提升
虽然工作没有继续做自己最喜欢的Android的开发,对于自己来说,从事J2EE又是一种挑战,自己 可以学习更多的东西,开阔自己的眼界,而不是局限在Android的应用开发领域. 工作这段时间,自己学到 ...
- php获取GET方式传入的全部变量名称与值:foreach用法
$count = count($_GET); $i = 0; foreach ($_GET as $key => $value) { if ($i == $count - 1) { $str . ...
- ......那么Win8.1怎么去掉文件夹?
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-11) 细心的朋友会发现,在Win8.1这台电脑(计算机)中,除了我们最熟悉的磁盘外,还新增了视频.图片.文档.下载.音 ...
- ActionBarCompat
布局文件中添加menu menu_main.xml <?xml version="1.0" encoding="utf-8"?> <menu ...
- cocos2d-x 使用Lua
转自:http://www.benmutou.com/blog/archives/49 1. Lua的堆栈和全局表 我们来简单解释一下Lua的堆栈和全局表,堆栈大家应该会比较熟悉,它主要是用来让C++ ...
- 设置AD用户属性
设置AD用户属性proxyaddresses的值 $test01 = [adsi]"LDAP://cn=test01,ou=oo,ou=admins,dc=ddv,dc=com" ...
- Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) A. Slime Combining 水题
A. Slime Combining 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2768 Description Your frien ...
- MySql之char与varchar
MySql之char与varchar的差别 char是一种固定长度的类型,varchar则是一种可变长度的类型.它们的差别是: 1. char(M)类型的数据列里.每一个值都占用M个字节.假设某个长 ...