将jQuery-UI小部件与jQuery模板结合使用？

Question

我正在使用jQueryUI和jQuery-tmpl,但我相信我正在寻找的建议足够广泛,它适用于任何类型的模板库.

我遇到的问题是我的模板中经常会有某种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兼容的浏览器构建时,我使用了工厂方法.

Answer 1

免责声明：我第一次听说 jQuery-tmpl 是在阅读你的问题时。

根据我对您的问题的理解，我会尝试构建我的小部件实例化，以便将更改设置为自动且广泛地发生在任何给定页面上与某些参数匹配的所有元素上。

您可以在框架中包含一个 UI 初始化函数，该函数在调用时会查看您告诉它的所有 DOM 元素，然后将它们转换为 jQuery UI 小部件。流程会像......

1. jQuery-tmpl 会遍历所有数据并将其转换为适当的模板化输出。
2. 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 处理完成后调用它。

无论如何，我希望这会有所帮助！

PS 也许这与 jQuery-tmpl 相关（虽然我无法理解是什么），但看起来你的小部件是由脚本标签内的 DOM 元素组成的。对我来说，这似乎非常不规则；P