微软Lightswitch使用C＃创建动态用户界面，jQuery的移动和JavaScript

Question

因此，我正在开发一个微软的Lightswitch应用程序在C＃中使用Visual Studio 2013，我需要一个动态的用户界面。

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

现在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 Mobile的按钮不执行任何操作。第一个仍然正常工作，但新的一个坏了。

有没有比我所做的更好的方式做到这一点？有没有内置的lightswitch方式来做到这一点？

编辑：所以它看起来像jQuery的按键事件是JavaScript文件中的其他地方，而不是按钮声明本身内：

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

这意味着即使我创造了“看起来和感觉'按钮，他们实际上没有做任何事情。我必须找出按钮调用的方法，然后使用.bind jquery方法将新按钮绑定到相同的方法。

Answer 1

这种更简单的方法可以是使用人的屏幕上定义的弹出窗口（不AddPersonSkills对话框）。

在ViewPerson屏幕：

1. 在屏幕设计的“弹出窗口”一节中，添加一个新的弹出
2. 添加PersonSkills查询（如果它已不存在）
3. 将在PersonSkills查询到你想让它显示在屏幕上的位置
4. 正上方你添加，添加一个新的按钮，指定操作打开创建
5. 添加数据项弹出的“PersonSkills”列表中，选择“查询”，选择“技能”
6. 拖动“技能”查询到的新的弹出
7. 选择加入
8. 在“操作”属性页的部分的“技能”列表控件，点击链接旁边的“项塔”，选择创建一个新的方法和插入以下

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. 从技能水龙头将上面的代码按钮的新方法（我们不能关闭弹出窗口上自来水了，因为用户需要还可以设置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(); 
 
};

这将使弹出如下图所示：

这里是弹出式的设计看起来：

Answer 2

至于让你的按钮的工作，你用：

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

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