65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Knockout.js 进行 SharePoint Web 部件模板化：第二部分

Drasko Popovic
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.62/5 (5投票s)

2013年12月29日

CPOL

7分钟阅读

viewsIcon

20805

downloadIcon

278

系列文章“使用 Knockout 进行 Web 部件模板化”的第二部分

引言

这是这个迷你系列文章的第二部分。在 第一部分 中，我解释了 knockout 并提供了一个简单的概念验证网页示例（仅包含 js、html、css）。现在我们将进入 SharePoint 部分。

使用代码

SharePoint 部分

如前所述，我假设您已经有一些 SharePoint 开发经验，因此我将不解释如何创建项目和添加项目项。项目类型是标准的 Visual Studio 2010 SharePoint 空项目模板。

SharePoint 部分包含以下项目

  • Web 部件项 – KnockoutWp。标准的 SharePoint Visual Web 部件项目项。
  • 资源模块。SharePoint 模块项目项。我们将用它来部署图像和 css 文件（0.png – 用于图像和控件的空容器。css – 我们项目的 css 文件）。
  • 布局映射文件夹。我们将在此处放置模板的编辑器页面。

这是项目的解决方案资源管理器。

资产

我们将部署 2 个文件。

  • 0.png – 1x1 像素的透明图像，又名占位符。
  • Controls.css – 我们模板的 css 文件。

这两个项目都将部署到 SharePoint 站点集（site collection）的样式库（Style Library）中，以便内容编辑者以后无需重新部署解决方案即可进行更改。

这是 elements.xml 文件。

因此，我们的资源将部署到 http://oursitecollectionurl/Style Library/wp 文件夹。

KnockoutWp

这是 Visual Studio 2010 的 Visual Web 部件。

它包含 4 个项目。

  • KnockoutWp.cs – Web 部件类。
  • KnockoutWpUserControl – 我们 Web 部件的用户控件。
  • KnockoutWp.webpart – Web 部件 xml 文件。
  • Elements.xml – manifest 文件。

KnockoutWP.cs

这是 Web 部件本身的类。它由 Visual Studio 自动生成，并继承自 System.Web.UI.WebControls.WebParts.WebPart。在这里，我们定义 Web 部件的属性和方法。一个属性是自动生成的（其他将在以后添加）：_ascxpath，一个用于定位将用于表示此 Web 部件的用户控件的字符串。CreateChildControls 方法也在这里，而且它相当基础。我们将在以后对其进行修改。
属性

Web 部件具有以下属性：

  • ListUrl（字符串，必需）– 要显示的列表的 URL。
  • TitleField（字符串，可选）– 将显示为标题的字段的显示名称。如果为空，将使用 Title 字段。
  • DateField（字符串，可选）– 将显示为日期的字段的显示名称。如果为空，将使用 Created 字段。
  • DescriptionField（字符串，可选）– 将显示为描述的字段的显示名称。如果为空，将省略。
  • ImageField（字符串，可选）- 将显示为缩略图的字段的显示名称。如果为空，将省略。
  • NoOfItems（整数）– 要显示的列表项数量。
  • ItemTemplate（字符串）– Web 部件的 HTML 模板。定义我们 Web 部件的外观。
  • WpPosition（枚举）– 用于三列布局。Web 部件具有三种区域的样式：右侧、中心和左侧。区别在于宽度、内边距和外边距。一切都在 CSS 中设置，因此您可以根据您的环境进行调整。
下图中可以看到 Web 部件的字段属性与列表项字段之间的映射。

 

EditorPart 

我在这个 Web 部件中添加了另一项：EditorPart 类 GenericListPartEditorPart。我不会深入探讨编辑器部分，但这里有一些快速信息。当您为 Web 部件创建一个公共属性时，它会自动显示在 Web 部件编辑面板中。当您需要简单的属性（如字符串、数字和短列表）时，这是一个很棒的概念。如果您需要更复杂的场景（就像我们在这里为 Web 部件需要的那样），这就不够了。我在这里想要的是一个模板编辑器。它可能相当大，所以想法是在 Web 部件编辑面板中有一个按钮，该按钮将打开一个带有编辑器的弹出窗口。用户将处理我们的模板，单击“应用”并更改 ItemTemplate Web 部件属性。

上面这两张图片解释了概念。下一步将是实现代码高亮框架，例如 CodeMirror。

添加 EditorPart 很容易。首先，创建一个继承自 EditorPart 的类。在 CreateChildControls 重写中，创建自定义编辑器的控件。在 ApplyChanges 和 SyncChanges 重写中，同步编辑器部分和 Web 部件。当编辑器部分完成后，我们的主 Web 部件类必须实现 IWebEditable 接口，并将 EditorPart 对象映射到 Web 部件本身。请参见下图。

有关此主题的更多信息：http://msdn.microsoft.com/en-us/library/hh228018(v=office.14).aspx。

模板编辑器 KnockoutWpUserControl

这是 Visual Studio 在项目中添加 Visual Web 部件项目项时创建的用户控件。它包含标记 ascx 文件和代码隐藏 .ascx.cs 文件。我们将在此处放置我们的标记和 c# 代码。

标记

这是完整的标记。

<script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.0.0.js">
</script>
<style type="text/css">  @import url("/Style
Library/wp/controls.css");  </style>  
<div class="glwp glwp-<%=PositionClass %>" id="k<%=WpId %>">
  <div class="glwpLine"></div>      
  <h5><img src="<%=Icon %>" width="28" 
    height="28" align="absmiddle"><%=Title %></h5>
    <div class="glwpLineGrey"></div>      
  <asp:Literal ID="LitLayout" runat="server"></asp:Literal>
</div>  

<script type="text/javascript">    
  function OpenDialog(Url) {
    var options = SP.UI.$create_DialogOptions();        
    options.resizable = 1;        
    options.scroll = 1;        
    options.url = Url;
    SP.UI.ModalDialog.showModalDialog(options);    
}         
// Item class         
  var Item = function (id, title, datecreated,url,description,thumbnail) {            
     this.id = id;            
     this.title = title;
     this.datecreated = datecreated;
     this.url=url;
     this.description=description;
     this.thumbnail=thumbnail;
  }         
 //ViewModel goes here (It's created on server)        
 <asp:Literal runat="server" ID="LitItems"></asp:Literal>
 
//Function that opens Template editor. Used only in edit mode of web part       
 function portal_openTemplateEditor(wpid) {       
  var val="";              
  var options = SP.UI.$create_DialogOptions();              
  options.width = 600;             
  options.height = 500;                
  options.url = "/_layouts/KnockoutTemplate/TemplateEditor.aspx?c="+wpid;//"";
  options.dialogReturnValueCallback =
           Function.createDelegate(null,portal_openTemplateEditorClosedCallback);
  SP.UI.ModalDialog.showModalDialog(options);
}
</script>

标记的第一部分（下图）包含脚本（knockout，在远程服务器上）和样式引用（本地文档库中的 controls.css）。下方是定义 Web 部件容器的 HTML 标记（顶部和底部边框、宽度、图标和标题）。标记不是最干净的，因为我有点懒，在其中留下了一些公共属性。请注意 <%=PositionClass%>、<%=WpId%> 等。

这里是用户控件的所有公共属性，它们用于显示。

  • PositionClass – 根据 WpPosition Web 部件属性（右侧、中心或左侧）将适当的 CSS 类添加到标记中，从而定义 Web 部件的宽度、内边距和外边距。WpId 是 Web 部件的 guid。它用于唯一标识 Web 部件，因为我们可以放置多个相同类型的 Web 部件，如果没有此标识符，一切都会出错。
  • Icon – 将显示在 Web 部件上的图标的 URL。这里使用了 Web 部件属性 Title Icon Image URL（这是 OOB 属性）。
  • Title – Web 部件的标题文本。在 Web 部件标题区域输入的文本。这里使用了 Web 部件属性 Title（这是 OOB 属性）。
最后有趣的项是 Literal 控件 LitLayout。此控件将保存我们的 ItemTemplate 属性（我们 Web 部件的 HTML 模板）。

第二部分是一个打开列表项在对话框窗口中的 Java 脚本函数。当底层列表不是文档库时使用。

第三部分是 knockout 视图模型（Java 脚本）。Item 类定义不言自明（仅定义 6 个属性）。模型的其余部分是在服务器端创建的，所以现在只有一个 LitItems Literal 控件在那里。

第四部分只是一个用于编辑 Web 部件属性的 Java 脚本函数。此函数在对话框窗口中打开模板编辑器。

代码

属性

  • Web 部件的属性
    • Icon – 图标的 URL。
    • Title – Web 部件的标题。
    • ListUrl – 列表的 URL。
    • TitleField – 列表中的标题字段。
    • DateField – 列表中的日期字段。
    • ImageField – 列表中的图像字段。
    • DescriptionField – 列表中的描述字段。
    • NoOfItems – 要返回的项目数。
    • Position – Web 部件的位置（右侧、左侧或中心）。
    • ItemTemplate - Web 部件的 HTML 模板。
    • WpId – Web 部件的 guid ID。
  • UC 的属性
    • PositionClass – 基于位置的 CSS 类。
    • ColumnMap – 包含列表项字段内部名称的字典。
方法：该文件只有一个方法 Page_Load。代码以提升的权限执行。

在该方法中，我们

  1. 通过提供的 URL (ListUrl 属性) 解析列表 SPList annList = annWeb.GetList(ListUrl);
  2. 根据显示名称获取列表列的内部名称 (WP 属性 - TitleField – Title 字段，DateField，ImageField，DescriptionField) SpHelper.GetFieldsInternals(annWeb, annList.Title, TitleField, DateField, DescriptionField, ImageField, columnMap );  
  3. 创建 CAML 查询 SpHelper.GetGenericQuery(annList, q, NoOfItems);
  4. 执行它
  5. 迭代 SPListItemCollection (coll) 并创建所需的 JavaScript。
辅助类

SPHelper 是一个辅助类，您可以在 Helpers 目录中找到它。

它有 3 个职责：

  1. 根据提供的列表列显示名称（WP 属性 - TitleField – Title 字段，DateField，ImageField，DescriptionField）检索列表列的内部名称 - GetFieldsInternals 方法。
  2. 创建 Caml 查询以检索列表项 – GetGenericQuery 方法。
  3. 根据其类型从 SharePoint 列检索值 – GetFieldValue 方法。

下载文件 

总结 

好了，就是这样。我试图帮助您创建更灵活的视图。在 Sharepoint 2013 中，您可以使用相同的技术，但不需要使用 Web 部件，您可以自定义视图。尽管 Knockout 是一个很棒的框架，但对于显示目的，您也应该查看 Handlebars。也许 mustaches 更适合您 :-)。

© . All rights reserved.