天道酬勤,学无止境

三便士中基于行为的动态元素(Dynamic Elements based on Behaviour in threepenny-gui)

问题

简单来说,我正在寻找一种显示Behaviour (UI Element)

我的实际用例是显示一个可以过滤的表格。 所以我有一个函数tableElement :: String -> UI ElementString参数是过滤条件)和一个输入字段filterElement :: Element ,它代表过滤器。 对我来说,将这些组合起来的最自然的方式是这样的:

bFilter <- stepper "" (valueChange filterElement)
displaySomehow (fmap tableElement bFilter)

这也是 Elm 的做法。

到目前为止,我发现的最接近的事情是使用sink children ,但这仅适用于[Element]而不适用于[UI Element] 。 此外,我必须使用一个虚拟元素作为父元素或摆弄其余的孩子。

用threepenny-gui实现这样的东西的最佳方法是什么?

回答1

(作者在这里)

请注意, UI Element表示一个操作,该操作在执行时可能会创建一个新的Element 。 您必须执行操作才能执行后者。 不幸的是,目前没有办法在 FRP 样式中完全做到这一点,每当过滤器发生变化时,您将不得不求助于onChanges组合器来重新创建表。 在那里,您可以使用set children

例子:

onChanges bFilter $ \s -> do
    el <- tableElement s
    myTable # sink children [el]

Bartab.hs 和 CRUD.hs 示例可能与您的情况相关。

回答2

您可以使用currentValue从您(希望)在UI获取UI Element ,并可以获取包含在 HTML 中的元素。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 遍历动态向量时使用 auto 的异常行为(Unusual behavior with auto while traversing a dynamic vector)
    问题 我正在遍历带有 auto (附加代码)的向量。 在遍历时,我还在后面附加了一些元素。 我没想到我得到的输出。 #include <iostream> #include <vector> using namespace std; vector <int> dynamic_vector; void access( ) { for ( auto i : dynamic_vector ) { if ( i == 3 ) { dynamic_vector.push_back( 4 ); dynamic_vector.push_back( 5 ); } cout << i << endl; } } int main() { dynamic_vector.push_back( 1 ); dynamic_vector.push_back( 2 ); dynamic_vector.push_back( 3 ); access( ); return 0; } 输出: 1 2 3 我期待从 1 到 5 的所有数字都会被打印出来。 我无法理解如何使用 auto 进行遍历? 回答1 除了songyuanyao's answer指出的问题,您提供的代码是未定义的行为。 首先,可能由于push_back向量需要重新分配,然后所有迭代器都无效,因此增加循环变量是未定义的行为。 查看 push_back
  • 如何实现多个元素的列表,其中一个元素可以通过单击展开? (动态插座名称?)(How to implement a list of multiple elements, where an element can be expanded by click? (Dynamic Outlet Names?))
    问题 我想实现以下概念。 你能给我一些我应该看看的提示或关键词吗? 这些是我的要求: 我想呈现一个元素列表。 每个元素都应该包含一个按钮。 单击按钮应显示与单击元素相关的其他详细信息(我不想将 jquery 用于简单的隐藏和显示,因为此单击会触发对我的后端服务器的附加调用)。 我的猜测是它可以像这样工作: 实现一个 ArrayController 来控制元素列表。 ArrayController 应该再次为每个元素包含一个控制器。 单击元素时,元素视图的出口应连接到控制器以获取其他详细信息。 这些是我使用这种方法的问题: 这是一种可行的方法吗? 如何实例化多个控制器并将我的元素在我的模板中传递给它? 如何访问元素的控制器,以便我可以为详细信息视图连接适当的控制器? 抱歉,我无法在描述中包含更多 Ember 术语。 我刚刚完成了第一个教程,现在我需要有人给我正确的方向。 谢谢! :-) - - -更新 - - - 我在周末自己解决了这个问题,并提出了以下解决方案。 http://jsfiddle.net/mavilein/SNte7/4/ 我认为 pangratz(第一个答案)提出的解决方案很好,如果有人有一个像他使用的那样的简单模型。 当我看到他的回答时,我意识到我没有足够详细地描述我的要求。 其实我的要求是这样的: 列表的初始状态 第一个元素第二元素第三元素 单击例如项目 3 后
  • 如何在CSS中以动态的列数和行数均匀地分配浮动元素?(How to distribute floated elements evenly with a dynamic column and row count in CSS?)
    问题 我有多个具有固定宽度和高度的div(想一想带有商品图片的某种目录视图)。 现在,我想向他们展示类似于float:left的行为。 这样可以确保浏览器窗口越大,一行中显示的div越多。 float:left解决方案的缺点是,在右边有一个很大的白色间隙,直到另一个div适合为止。 现在我要做的工作是将div均匀地分布在一页上,而不是在右侧没有大的白色间隙,而应在单个div之间均匀地分布间隙。 使用JavaScript解决方案很容易:http://dl.dropbox.com/u/2719942/css/columns.html 您可以看到,如果您调整浏览器窗口的大小,它的行为类似于float:left,但是空格在两个框之间平均分配。 列数和行数是使用JavaScript动态计算的: function updateLayout() { var boxes = document.getElementsByClassName('box'); var boxWidth = boxes[0].clientWidth; var boxHeight = boxes[0].clientHeight; var parentWidth = boxes[0].parentElement.clientWidth; // Calculate how many boxes can fit into one
  • 在动态数组上基于范围的for循环?(Range-based for loop on a dynamic array?)
    问题 有一个基于范围的for循环,其语法为: for(auto& i : array) 它适用于常量数组,但不适用于基于指针的动态数组,例如 int *array = new int[size]; for(auto& i : array) cout<< i << endl; 它给出有关替换失败的错误和警告,例如: 错误] C:\ Users \ Siegfred \ Documents \ C-Free \ Temp \ Untitled2.cpp:16:16:错误:没有匹配的函数调用'begin(int *&)' 如何将这种新语法与动态数组一起使用? 回答1 要使用基于范围的for循环,您必须提供begin()和end()成员函数,或者重载非成员begin()和end()函数。 在后一种情况下,您可以将范围包装在std::pair并为以下对象重载begin()和end() : namespace std { template <typename T> T* begin(std::pair<T*, T*> const& p) { return p.first; } template <typename T> T* end(std::pair<T*, T*> const& p) { return p.second; } } 现在,您可以像这样使用for循环: for (auto&&
  • jquery.validate.unobtrusive不适用于动态注入的元素(jquery.validate.unobtrusive not working with dynamic injected elements)
    问题 我正在使用ASP.Net MVC3 ,使用客户端验证的更简单方法是启用jquery.validate.unobtrusive 。 一切正常,对于服务器中的正确内容。 但是,当我尝试使用javascript注入一些新的“输入”时,我知道我需要调用$.validator.unobtrusive.parse()重新绑定验证。 但是,所有这些动态注入字段仍无法正常工作。 更糟糕的是,我尝试使用jquery.validate进行手动绑定,但它也不起作用。 有什么想法吗? 回答1 我为jquery.validate.unobtrusive库创建了一个扩展,它针对我的情况解决了这个问题-可能很有趣。 http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/ 回答2 我尝试了Xhalent的方法,但不幸的是,它对我没有用。 罗宾的方法行得通而且行不通。 它对于动态添加的元素非常有用,但是,如果您尝试使用JQuery从DOM中删除所有验证属性和跨度,则验证库仍将尝试对其进行验证。 但是,如果除“ validationData”之外还删除了表单的“ unobtrusiveValidation”数据,它就像一种用于动态添加和删除要验证或未验证的元素的超级按钮。 $(
  • 使用 ngFor 和 ngModel 动态数据错误行为(Using ngFor with ngModel dynamic data wrong behaviour)
    问题 我的应用程序逻辑中存在复杂且可能是新手的错误,因此我将尝试提供全面的信息。 我已将注册表单绑定到我的数据模型。 用户可以在注册时添加电话号码字段并保存为数组。 我的型号: export class RegistrationFormModel { // // Phones: Array<{Phone: string;}>; // // } 和这部分形式的表示 <ion-item *ngFor="let Phone of regModel.Phones; let i = index"> <ion-label floating>Phone number*</ion-label> <ion-input type="tel" required [(ngModel)]="regModel.Phones[i].Phone" name="Phone" #Phone="ngModel" pattern="\d{10}"></ion-input> <ion-icon *ngIf="i==0" name="ios-add-circle-outline" item-right no-padding (click)="addPhone()"></ion-icon> <ion-icon *ngIf="i!=0" name="ios-remove-circle-outline" item-right no
  • 虚函数默认参数行为(virtual function default arguments behaviour)
    问题 我对以下代码有一个奇怪的情况。 请帮助我弄清楚它。 class B { public: B(); virtual void print(int data=10) { cout << endl << "B--data=" << data; } }; class D:public B { public: D(); void print(int data=20) { cout << endl << "D--data=" << data; } }; int main() { B *bp = new D(); bp->print(); return 0; } 关于我期望的输出 [ D--data=20 ] 但是实际上 [ D--data=10 ] 请帮忙。 对于您来说,这似乎很明显,但我不了解其内部机制。 回答1 默认参数完全是编译时功能。 即,在编译时执行默认参数替换缺失参数的操作。 因此,显然,成员函数的默认参数选择不可能取决于对象的动态(即运行时)类型。 它始终取决于对象的静态(即编译时)类型。 您在代码示例中编写的调用将被编译器立即解释为bp->print(10)无论其他情况如何。 回答2 标准说(8.3.6.10): 虚函数调用(10.3)在虚函数的声明中使用默认参数,该声明由表示对象的指针或引用的静态类型确定。 派生类中的重写函数不会从其重写的函数中获取默认参数。 这意味
  • Ruby中的数组切片:不合逻辑行为的解释(摘自Rubykoans.com)(Array slicing in Ruby: explanation for illogical behaviour (taken from Rubykoans.com))
    问题 我在进行Ruby Koans的练习时,被以下发现我无法解释的Ruby怪癖震惊: array = [:peanut, :butter, :and, :jelly] array[0] #=> :peanut #OK! array[0,1] #=> [:peanut] #OK! array[0,2] #=> [:peanut, :butter] #OK! array[0,0] #=> [] #OK! array[2] #=> :and #OK! array[2,2] #=> [:and, :jelly] #OK! array[2,20] #=> [:and, :jelly] #OK! array[4] #=> nil #OK! array[4,0] #=> [] #HUH?? Why's that? array[4,100] #=> [] #Still HUH, but consistent with previous one array[5] #=> nil #consistent with array[4] #=> nil array[5,0] #=> nil #WOW. Now I don't understand anything anymore... 那么为什么array[5,0]不等于array[4,0] ? 从第(length + 1)个位置开始时
  • 带有 ngFor 元素的 ngModel 的动态 angular2 形式(Dynamic angular2 form with ngModel of ngFor elements)
    问题 我正在尝试创建一个连接到 ngModel 的动态表单,它允许用户根据需要添加更多控件。 就像下图一样: 表单的行为与预期一致,除非添加一组新控件,因为它会删除先前输入的内容。 即使模型没有改变。 我创建了这个 plunkr 来演示我正在谈论的行为。 这是我写的html模板: <tr *ngFor="let work of works; let i = index"> <td> <select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation"> <option>Operation 1</option> <option >Operation 2</option> </select> </td> <td> <input required type="number" class="form-control" [(ngModel)]="work.cost" name="cost"> </td> <td> <input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours" name="hours"> </td> <td>
  • 基于 iOS Swift 的动态框架中的 Objective C 类(Objective C classes within an iOS Swift-based dynamic framework)
    问题 情况: 我有一个用 Swift 编写的 iOS 动态框架。 我还有一堆用 Objective C 编写的类,我会在我的 Swift 类中使用它们(有些是公共的,有些是私有的)。 但是,我希望 Objective C 类不要暴露给使用我的框架的项目。 我尝试过的: 伞头 据我所知,我应该在我的伞头文件中使用#import header.h导入,通常是FrameworkName.h ,然后确保我希望包含在我的 Swift 类中的所有目标 C 头文件都标记为“公共”,在构建阶段 -> 标题下。 但是,这样做会自动将使用我的框架的项目暴露给框架使用的所有私有 Objective C 类。 模块映射(带有单独的模块) 正因为如此,我研究了使用模块映射,这是记录在这里。 我看过其他用户的帖子,比如这个和这个,以及这个 Github 存储库。 我成功地完成了以下工作: //SharedClasses/module.modulemap module SharedClasses { } //SharedClasses/module.private.modulemap module SharedClasses.Private { header "header.h" export * } 问题是在我的项目中(导入了这个框架),这个: import Framework import
  • C ++中的静态数组与动态数组(Static array vs. dynamic array in C++)
    问题 C ++中的静态数组和动态数组有什么区别? 我必须为我的课程做一个分配,它说不要使用静态数组,而只能使用动态数组。 我在书中和网上都看过,但我似乎不太明白。 我以为静态是在编译时创建的,而动态是在运行时创建的,但我可能会误以为是内存分配。 您能解释一下C ++中静态数组和动态数组之间的区别吗? 回答1 本地数组是在堆栈上创建的,并且具有自动存储期限-您不需要手动管理内存,但是当它们结束使用时,它们会被销毁。 它们必须具有固定的大小: int foo[10]; 使用operator new[]创建的数组具有动态存储持续时间,并存储在堆中(从技术上讲是“免费存储”)。 它们可以有任意大小,但是由于它们不属于堆栈框架,因此您需要自己分配和释放它们: int* foo = new int[10]; delete[] foo; 回答2 static是C和C ++中的关键字,因此,static不是应用于一般的描述性术语,而是将其应用于变量或数组时具有非常特定的含义。 更令人困惑的是,它在不同的上下文中具有三种不同的含义。 因此,静态数组可以是固定的,也可以是动态的。 让我解释: 首先是特定于C ++的: 静态类成员是未使用构造函数实例化或未使用析构函数删除的值。 这意味着该成员必须以其他方式初始化和维护。 静态成员可以是初始化为null的指针,然后在首次调用构造函数时进行分配。 (是的
  • 在基于范围的for循环中设置矢量元素(Setting vector elements in range-based for loop)
    问题 在分配给动态分配的std::vector元素时,遇到了我认为基于c ++ 11范围的for循环很奇怪的行为。 我有以下代码: int arraySize = 1000; std::string fname = "aFileWithLoadsOfNumbers.bin"; CTdata = new std::vector<short int>(arraySize, 0); std::ifstream dataInput(fname.c_str(), std::ios::binary); if(dataInput.is_open() { std::cout << "File opened sucessfully" << std::endl; for(auto n: *CTdata) { dataInput.read(reinterpret_cast<char*>(&n), sizeof(short int)); // If I do "cout << n << endl;" here, I get sensible results } // However, if I do something like "cout << CTdata->at(500) << endl;" here, I get 0 } else { std::cerr << "Failed to open
  • 可变行为随var,dynamic和linq组合的变化(Odd behaviour change with var, dynamic and linq combination)
    问题 我(懒洋洋地)在以下代码的原始版本中使用了var ,并在代码的完全不同的部分中得到了一个奇怪的运行时异常。 将“ var”更改为“ int”可修复运行时异常,但我不明白为什么。 我将代码简化为这个示例。 public class Program { private static List<string> Test(string i) { return new List<string> {i}; } private static dynamic GetD() { return 1; } public static void Main() { int value1 = GetD(); // <-- int var result1 = Test("Value " + value1); // No problem, prints "Value 1", First() on List<string> works ok. Console.WriteLine(result1.First()); var value2 = GetD(); // <-- var var result2 = Test("Value " + value2); // The below line gives RuntimeBinderException // 'System.Collections.Generic
  • jQuery 和动态元素与显示 css 属性(jQuery and dynamic elements vs display css attribute)
    问题 在设计 html 界面元素时,根据特定事件显示/隐藏 DOM 是一个非常常见的场景。 我的问题很简单,但每次遇到这个我总是想知道:将元素硬编码在 html 中并简单地切换显示属性(例如使用 .show/.hide)或动态添加/删除它们是否“更好”根据需要通过JS? 两者实施起来都很简单,但我不禁想知道它们如何比较,以及使用一个相对于另一个是否有任何优势/缺点。 在某些情况下,例如在多个地方逐字使用相同的元素时,在您进行时动态创建 DOM 似乎是有意义的,但另一方面,对它们进行硬编码从理论上讲更易于维护,因为您可以四处移动 DOM并根据需要更改它们,只要 jQuery 的选择器仍然相同,它们就会按预期工作。 一般来说,从设计师的角度来看,硬编码似乎是要走的路,但我期待着我在这里可能会忽略的想法和事情。 编辑:“硬编码”是指根本没有通过 JS 插入的元素; 也就是说,在原始 html 标记而不是 JS 中已经在其父文档中指定了它们的位置的元素。 回答1 最终,这实际上取决于您正在使用什么以及您的应用程序做什么,但是: 静态标记意味着服务器的更多工作(但前提是页面首先是动态生成的,对于静态页面,效果可以忽略不计)。 动态标记意味着为客户做更多的工作,这并不总是一件坏事,这取决于您的目标受众。 然而,从技术上讲,优雅降级建议静态标记是可行的方法
  • 动态jQuery使用基于元素的AddMethod验证错误消息(Dynamic jQuery Validate error messages with AddMethod based on the element)
    问题 假设我有一个自定义的AddMethod到jQuery Validate中,如下所示: $.validator.addMethod('min-length', function (val, element) { // do stuff // the error message here needs to be dynamic }, 'The field cannot be less than than ' + element.attr('data-min') + // it is within the closure, but it can't grab it ' length.'); 我想不通一种方法来获取有问题的元素变量,并从中获取任何值。 我在这里想念什么? 回答1 通过查看验证器源代码,我认为应该这样做: $.validator.addMethod('min-length', function (val, element) { return this.optional(element) || val.length >= $(element).data('min'); }, function(params, element) { return 'The field cannot be less than than ' + $(element).data('min') +
  • SDLC
    SDLC 定义 安全开发生命周期(SDLC:Security Development Lifecycle),通过可重复和可预测的流程来确保软件开发满足功能,成本,质量,交付周期的需求的软件开发过程。 SDLC的核心理念就是BSI:将安全考虑集成在软件开发的每一个阶段:需求收集、设计、开发、测试/验证,发布维护。一:需求收集安全需求安全风险评估隐私风险评估:P1》P2》P3风险级别验收二:设计1. 3种模型:信息模型功能模型行为模型2. SDLC安全设计核心原则:2.1 Attack Surface Reduction:***面分析(消减分析:识别和减少被不可信用户访问的代码和功能的数量)Basic Privacy: 基本隐私Least Privilege: 权限最小化Secure Defaults: 默认安全Defense in Depth:纵深防御Threat Modeling:威胁建模(了解不同威胁如何实现、破坏如何成功进行的系统方法)2.2常见的***面分析技巧如下表:Higher Attack SurfaceLower Attack SurfaceOn by defaultOff by defaultOpen socketClose socketUDPTCPAnonymous accessAuthenticated user accessConstantly onOn as
  • 将动态数组包装到STL / Boost容器中?(Wrapping dynamic array into STL/Boost container?)
    问题 我需要将一个动态分配的数组(例如,从a = new double [100])包装到std :: vector(最好是)而不复制数组。 我要包装的数组是从文件映射的,因此施加了此限制,因此仅执行vector(a,a + size)会使内存使用量增加一倍。 有什么窍门吗? 回答1 最好的解决方案之一是使用STLSoft的array_proxy <>模板。 不幸的是,doxygen从源代码生成的文档页面并不能帮助您理解模板。 源代码实际上可能更好一些: http://www.stlsoft.org/doc-1.9/array__proxy_8hpp-source.html 在Matthew Wilson的书《 Imperfect C ++》中很好地描述了array_proxy<>模板。 我使用的版本是STLSoft网站上的精简版,因此我不必提取整个库。 我的版本不那么可移植,但是它比STLSoft(跳过许多可移植性障碍)上的版本要简单得多。 如果您像这样设置变量: int myArray[100]; array_proxy<int> myArrayProx( myArray); 变量myArrayProx具有许多STL接口myArrayProx begin() , end() , size() ,迭代器等。 因此,在许多方面, array_proxy<>对象的行为就像一个矢量
  • jQuery悬停不适用于动态元素(jQuery hover not working with dynamic elements)
    问题 我从数据库中获取数据,并根据匹配数,我想输出以下内容: <div id='link_delete_holder' style='position:absolute;left:590px;top:10px'> <img id='link_delete' src='images/account_related/icons/link_delete.png'/> </div> 我希望该图像在悬停时发生变化,因此我使用以下代码: $('#link_delete').hover(function(){ $(this).attr('src', 'images/account_related/icons/link_delete_h.png'); }, function(){ $(this).attr('src', 'images/account_related/icons/link_delete.png'); }); 现在,问题在于它仅适用于第一条记录(显示的第一张link_delete图像),似乎不适用于其他图像。 回答1 如果要创建动态数据,请不要使用ID来获取它们,因为具有两个具有相同ID的元素不是有效的HTML。 使用同名的类,它将正常工作。 <div id='link_delete_holder' style='position:absolute;left:590px;top
  • chrome 和 firefox 中的 z-index 行为不同(z-index behaviour is different in chrome to firefox)
    问题 我有一堆应用于父元素及其子元素的 CSS: .parent { position: fixed; top: 0px; } .el { position: fixed; top: 5px; z-index: 100; } .bodycontent { z-index: 1; position: relative; } <div class="parent"> <div class="el"> <button></button> </div> </div> <div class="bodycontent"></div> 页面被制作成当它被滚动时, .parent位于.bodycontent下方,而.el位于其上方。 这在 Firefox 中按我希望的方式工作,但在 Chrome 上不工作。 有什么建议么? 我尝试使用不同的z-index值和不同的position值,但没有成功。 回答1 Chrome 和 Firefox 都按预期工作 从版本 22开始,这是 Chrome 有意处理fixed元素堆叠的方式。 正如谷歌自己在一篇文章中所述: 在 Chrome 22 中, position:fixed元素的布局行为与以前的版本略有不同。 所有position:fixed元素现在形成新的堆叠上下文。 这将更改某些页面的堆叠顺序,这可能会破坏页面布局。 (https:/
  • 一种基于动态插件系统的移动测试黑科技
    背景移动APP插件化是平台化产品解决系统限制(65535)、模块解耦、和多团队协作的利器。它的最大特点是模块动态下发,给产品带来的收益显而易见,但是,在百度,这套系统给移动端测试技术带来了新思路移动端线上问题定位的几个场景:场景一: 云端用户反馈某功能不可用,RD猜测几种可能触发原因,线上收集的客户端打点日志信息不全,无法完全确认问题。陷入死循环,线上用户持续暴露问题,线下无法稳定复现,不能及时定位问题。如何破?场景二:通过客户端预埋方式打点用户行为,往往会出现打点不全的问题,而往往线上问题的定位需要这些行为日志为问题定位提供良好的复现步骤。 如何无需编码,通过技术手段获取全量用户与客户端交互日志?场景三:线下很多好工具可以SDK化,给线上问题发现和定位带来大量正向收益,但因为测试能力本身会影响集成app的性能,或开发团队排期等原因,无法集成,大量线上问题无法充分暴露。如何优美的解决这种问题?场景四:百度的线上客户端小流量实验表明,线上问题实际是一种正态分布的随机事件,TOP问题,往往只需抽样很少量用户即可召回,而不需要影响全量用户移动端线下测试的几个场景:场景一: 客户端测试简单却又复杂,一个客户端测试人员的简单技能树可能包括这些问题的分析能力: ANR、crash、卡顿、内存泄露、内存、CPU占用、电量分析、启动速度分析等等一系列的技能。而往往,部分QA人员并不是全栈