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

Question

因此，我正在使用 C# 中的 Visual Studio 2013 开发 Microsoft Lightswitch 应用程序，我需要一个动态 UI。

基本上在数据库中我有一个 Person 表、一个 Skill 表和一个将两者链接在一起的 PersonSkills 表(一个人可以有多种技能，每个技能都有一个技能级别。现在忽略 Person 字段 - 那将是取出并自动完成)。

现在在 AddSkill 页面上，我需要能够添加任意数量的技能，而不必一遍又一遍地打开相同的 AddSkill 弹出窗口。我目前的做法是(使用谷歌浏览器)右键单击 + 按钮搜索技能并选择检查元素，以查看该按钮的 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 方法将新按钮绑定(bind)到相同的方法。

Answer 1

一个更简单的方法是使用在 Person 屏幕(而不是 AddPersonSkills 对话框)上定义的 Popup。

在 ViewPerson 屏幕上:

1. 在屏幕设计器的“弹出窗口”部分，添加一个新的弹出窗口
2. 添加 PersonSkills 查询(如果尚不存在)
3. 将 PersonSkills 查询拖到您希望它在屏幕上显示的位置
4. 在您添加的“PersonSkills”列表上方，添加一个新按钮，指定打开您创建的 Popup 的操作
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();
};

这就是最终的体验(在我的示例中，我将 Customers、Vendors 和 PreferredVendors 作为关系表(因此 Customers 可以有很多 PreferredVendors))

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

1. 添加数据项... --> 本地属性(将类型更改为整数)，将其命名为 SkillLevelProp
2. 将 SkillLevelProp 属性拖到 Popup 上
3. 向 Popup 添加一个按钮(选择 Write my own method)
4. 将上面的代码从 Skills 的 tap 移到按钮的新方法(我们不能再在点击时关闭弹出窗口，因为用户还需要设置 SkillLevel)

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();
};

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

弹出窗口的设计如下: