我遇到的问题是我的模板中经常会有某种CRUD小部件
<script id="some-widget-template"> <div class="some-widget"> <input name="NameField"/> <button id="some-widget-save">Save</button> </div> </script>
这让我有一个非常易读的小部件,我可以回去编辑,等等.除了它是丑陋的.使用jQueryUI我可以使按钮非常漂亮,但它需要一些Javascript.所以在我相应的Javascript控制器中,我的代码将如下所示：
$("#some-widget-template")
.render( arrayOfDataObjects )
.appendTo("body");
$("#some-widget-save").button();
对于这个非常简单的例子,这很好用.然而,我的控制器将很快变得混乱,需要转换的元素越多.感觉这应该是视图/模板引擎的关注点,更不用说具有降低代码可维护性的魔术字符串(“#some-widget-save”).
最好的方法是什么？当然,我不能成为第一个遇到这个问题的人.我一起攻击jquery-tmpl,这样在返回一个jQuery对象之前,它会扫描一个按钮元素,如果它遇到它,就把它转换成一个合适的按钮元素.这似乎很慢,因为它必须遍历模板中的每个元素.有任何想法吗？
编辑：我发现使用CSS3时,90％的问题都被消除了.在为非CSS3兼容的浏览器构建时,我使用了工厂方法.
解决方法
基于我对您的问题的理解,我将尝试构建我的窗口小部件实例,以便将更改设置为自动且广泛地针对任何给定页面上与特定参数匹配的所有元素.
您可以在框架中包含一个UI初始化函数,该函数在调用时会查看您告诉它的DOM的所有元素,然后将它们转换为jQuery UI小部件.流程会像…
> jQuery-tmpl遍历并将所有数据转换为适当的模板化输出.
>在jQuery-tmpl运行之后,调用了你的实例化方法 – 让我们说“renderUI()”.
jQuery-tmpl会根据你的数据吐出一系列结构化元素……
<div class="some-widget">
<input name="NameField"/>
<button class="reset-button">reset</button>
<button class="save-button">Save</button>
</div>
<div class="tabbed-widget">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
实例化方法看起来像……
function renderUI() {
$('.some-widget > .save-button').button({/* options */});
$('.tabbed-widget > ul').tabs({/* options */});
/* ... continue any other types of widget instantiation ... */
}
如果要实例化由类而不是ID选择的UI元素,您可以将任意数量的元素放入文档中,并且它们都将“立即”实例化,因为jQuery将选择所有这些元素并应用UI Widget构造函数给他们.
如果您需要在实例化这些窗口小部件之前运行一些预处理代码(例如jQuery-tmpl),您可以封装窗口小部件的初始化,并在所有jQuery-tmpl处理完成后调用它.
无论如何,我希望这有帮助！
附：也许这是与jQuery-tmpl相关的东西(虽然我无法理解是什么),但看起来你的小部件由脚本标签中的DOM元素组成.关于这一点似乎对我来说非常不正常; P