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小部件。这个流程就像是......

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处理完成后调用它。 / p>

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

P.S。也许这是与jQuery-tmpl相关的东西（虽然我无法理解是什么），但看起来你的小部件由脚本标签中的DOM元素组成。关于这一点似乎对我来说非常不正常; P

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

1 个答案: