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

我使用jQueryUI的和jQuery的TMPL，但我相信我在寻找的建议是足够宽广它会适用于任何类型的模板化图书馆。jQuery-UI小部件与jQuery模板结合？

我的问题是，我会经常有某种形式的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兼容的浏览器构建时，我使用了工厂方法。

来源

2010-08-18 chum of chance

免责声明：我第一次听说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 ... */ 
}

如果您正在实例化按类选择的UI元素，而不是ID，您可以将其中的许多元素随意放入文档中，并且它们都会“一次性”实例化，因为jQuery将选择所有元素并应用UI Widget构造函数给他们。

如果您需要在这些小部件实例化之前运行一些预处理代码（例如jQuery-tmpl），您可以封装小部件的初始化并在所有jQuery-tmpl处理完成后调用它。

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

P.S.也许这是与jQuery-tmpl相关的东西（尽管我无法理解），但是看起来你的小部件是由脚本标记内的DOM元素组成的。有些事情对我来说似乎极不规律; P

来源

2010-08-20 21:19:05 cdata

感谢您的详细回复。这是我最初的路线，缺点是并不是所有的模板都在小部件初始化时呈现。首次初始化后，不同的事件会触发附加模板。我想最好是像功能一样的jQuery生活，但我不知道如何实现。 – 2010-08-21 17:03:16

啊，我明白了。我可以想象的一个替代解决方案是实际创建一个事件分派（或者，也可能是回调启用）工厂，该工厂处理从原始数据创建模板元素。您可以将数据传递给工厂的一个方法（例如factory.buildTemplate（'data'）），并且工厂可以响应一个回调或事件触发一个函数，该函数会根据属性和属性自动应用UI小部件DOM节点传递给它。让我知道这对你来说听起来是否合理，我会写一些伪代码=] – cdata 2010-08-22 19:00:50

糟糕，看起来你只有一半的赏金。对不起，这是我的第一个赏金......我认为我所要做的就是标出最好的答案。 – 2010-08-27 02:34:25

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

回答

相关问题