Microsoft Lightswitch 使用 c#、jquery mobile 和 javascript 创建动态用户界面

Question

所以我正在 c# 中使用 Visual Studio 2013 开发 Microsoft Lightswitch 应用程序，我需要一个动态 UI。

基本上在数据库中我有一个 Person 表、一个 Skill 表和一个 PersonSkills 表，它们将两者联系在一起（一个人可以有多种技能，每个技能都有一个技能级别。暂时忽略 Person 字段 - 那将是取出并自动完成）。

现在在 AddSkill 页面上，我需要能够添加任意数量的技能，而不必一遍又一遍地打开相同的 AddSkill 弹出窗口。我目前的做法是（使用 google chrome）右键单击 + 按钮以搜索技能并选择 Inspect Element，以查看该按钮的 css 代码（因为它是 css/jquery 移动元素）。

这为我提供了该技能框和级别框的 css 代码，并使用 lightswitch 的 postRender 方法和 .change jquery 方法，每当更改技能时，我将另一个技能和级别框的代码添加到组件中。

myapp.AddEditPersonSkill.left_postRender = function (element, contentItem) {
// Write code here.
var context = $(element);

//Sorry that its all in one line and terrible...

context.change(function () {
    context.append('<div class="msls-first-column  msls-presenter msls-ctl-rows-layout msls-vauto msls-hstretch msls-presenter-content msls-font-style-normal msls-hscroll msls-label-host msls-rows-layout" style="min-width: 200px; max-width: 400px; width: 229px;"><div class="msls-clear msls-first-row  msls-presenter msls-ctl-details-modal-picker msls-vauto msls-hstretch msls-leaf"><div class="msls-label msls-label-align-top msls-clear msls-vauto"><label>Skill</label></div><div class="msls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll"><div class="id-container"><form class="ui-listview-filter ui-bar-a ui-listview-filter-inset" role="search"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-a ui-mini"><input placeholder="Search" data-type="search" class="ui-input-text ui-body-a"><a href="#" class="ui-input-clear ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="a" data-mini="false"><span class="ui-btn-inner"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a></div></form><ul class="id-auto-complete-element ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search"></ul><a class="id-modal-button msls-has-search msls-large-icon ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext" tabindex="0" data-role="button" data-icon="msls-add" data-mini="true" data-iconpos="notext" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title=""><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-msls-add ui-icon-shadow">&nbsp;</span></span></a></div><div class="id-auto-complete-dropdown"></div></div></div><div class="msls-clear msls-last-row  msls-presenter msls-ctl-text-box msls-vauto msls-hstretch msls-leaf msls-redraw"><div class="msls-label msls-label-align-top msls-clear msls-vauto"><label for="b8bfe3adf-Level" class="ui-input-text">Level</label></div><div class="msls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll"><div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-a ui-mini"><input type="text" class="id-element ui-input-text ui-body-a" data-mini="true" maxlength="255" id="b8bfe3adf-Level"></div></div></div><div class="msls-clear"></div></div>');

});

};

这一切都很好 - 但是，问题出在：新的技能框（刚刚添加到屏幕上）没有工作按钮 - css/jquery 移动按钮什么也不做。第一个仍然可以正常工作，但新的坏了。

有没有比我现在做的更好的方法？有内置的电灯开关方式吗？

编辑：所以看起来 jquery 按钮事件在其他地方的 javascript 文件中，而不是在按钮声明本身中：

http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-events.html

这意味着即使我正在创建按钮的“外观和感觉”，它们实际上还没有做任何事情。我必须弄清楚按钮调用的是哪个方法，然后使用 .bind jquery 方法将新按钮绑定到相同的方法。

Answer 1

更简单的方法是使用在 Person 屏幕（不是 AddPersonSkills 对话框）上定义的 Popup。

在 ViewPerson 屏幕上：

1. 在屏幕设计器的“弹出窗口”部分，添加一个新的弹出窗口
2. 添加 PersonSkills 查询（如果还没有的话）
3. 将 PersonSkills 查询拖到您希望它在屏幕上显示的位置
4. 就在您添加的“PersonSkills”列表上方，添加一个新按钮，指定打开您创建的弹出窗口的操作
5. 添加数据项，选择“查询”，选择“技能”
6. 将“技能”查询拖到新的弹出窗口中
7. 选择已添加的“技能”列表控件
8. 在属性表的“Actions”部分，点击“Item Tap”旁边的链接，选择创建新方法并在下面插入代码

myapp.ViewPerson.Skills_ItemTap_execute = function(screen) {
  var personSkill = new myapp.PersonSkill();
  personSkill.Person = screen.Person;
  personSkill.Skill = screen.Skills.selectedItem;
  msls.application.applyChanges();
  screen.closePopup();
};

这是最终的体验（在我的示例中，我将客户、供应商和 PreferredVendors 作为关系表（因此客户可以有许多 PreferredVendors））

如果需要，您可以在弹出窗口中添加更多字段：

1. 添加数据项... --> 本地属性（将类型更改为整数），将其命名为 SkillLevelProp
2. 将 SkillLevelProp 属性拖到弹出窗口中
3. 向弹出窗口添加一个按钮（选择编写我自己的方法）
4. 将上面的代码从技能的点击移动到按钮的新方法（我们不能再关闭点击弹出窗口，因为用户还需要设置技能级别）

myapp.ViewPerson.submit_execute = function(screen) {
  var prefSkill = new myapp.PersonSkill();
  prefSkill.Person = screen.Person;
  prefSkill.Skill = screen.Skills.selectedItem;
  prefSkill.SkillLevel = screen.SkillLevelProp;
  msls.application.applyChanges();

  // clear out the SkillLevel value so it's empty the next time the popup is opened
  screen.SkillLevelProp = null;
  screen.closePopup();
};

这将使弹出窗口看起来像这样：

这是弹出窗口的设计：

Answer 2

就使您的按钮工作而言，您是否使用过：

// Tell JQuery Moble to render
objFieldset.trigger("create");

见： JQuery Mobile Tree Using Collapsible Sections and Dynamic Views in LightSwitch