DotVVM:包装第 3 方 JavaScript 控件的步骤,这些控件具有用于 KnockoutJS 的内置自定义绑定处理程序

DotVVM: Steps for wrapping 3rd Party JavaScript controls, which have builtin, custom binding handlers for KnockoutJS

我想使用一些 JavaScript 控件,它们已经实现了 KnockoutJS 绑定处理程序。在查看了 DotVVM 教程(例如 "Code-only Controls" 以及来自 DotVVM 源代码的控件之后,我对控件的哪些方面以及在何种程度上需要通过 DotVVM "Rendering Pipeline," 呈现感到困惑 "Rendering Pipeline," 如果确实如此他们需要。

另外,如果控件已经实现了 KnockoutJS 绑定处理程序,那么包装它们的过程是否与没有实现 KnockoutJS 绑定处理程序的控件相同?

如果您已经有了 Knockout 绑定处理程序,您只需编写一个控件来呈现适当的 HTML。

这里唯一的困难是控件属性的值可能在标记中被硬编码,或者它可以是数据绑定。有些属性只允许其中一种方式,有些则两种方式都允许。

基本上,您需要创建一个继承自 HtmlGenericControl 的 class 并在基本构造函数中告诉它应该呈现哪个 HTML 元素。例如:public MyControl() : base("div").

然后你需要声明控件属性。使用 dotprop 代码片段生成 属性 主体,并使用 MarkupOptions 属性,如果没有意义,您可以禁用硬编码值或数据绑定。

最后,您需要渲染 HTML。如果您只需要呈现 data-bind 属性,则只需覆盖 AddAttributesToRender

你可以打电话给writer.AddKnockoutDataBind("myBindingHandler", this, MyProperty, () => { /* handle the hard-coded value */ } )。 如果 属性 包含数据绑定,它将被自动翻译。如果它包含硬编码值,将调用最后一个参数(lambda)。

如果控件更复杂并且使用模板或调用回发,则需要在控件内部构建子控件,正确设置它们的绑定,在这种情况下不需要手动呈现它们。

DotVVM 使用如此复杂的渲染管道有几个原因:

  • 由于属性可以同时包含数据绑定和硬编码值,因此您将以许多 if 语句结束。有时,绑定是在服务器上评估的,有时是翻译成 JS 的。而且有些控件非常复杂,需要自己构建一些子控件。
  • Knockout 需要在 data-bind 属性中声明的所有属性。它们由逗号分隔,因此 API 处理连接并转换为正确的 JavaScript 表达式。
  • 将控件呈现拆分为 AddAttributesToRenderRenderBeginTagRenderContentsRenderEndTag 方法允许使用继承扩展控件。我们从 ASP.NET Web Forms 复制了它,因为它工作得很好。

如果你能提供一个例子说明你要渲染什么,我可以给出更具体的答案。