jQuery模板中的nexusUI小部件

我正在使用nexusUI作为项目，并希望使用模板，但发现似乎无法呈现。我想这是因为缺少画布背景，但我不太清楚如何去做......任何指针？jQuery模板中的nexusUI小部件

下面是说明问题的代码：

<!-- This renders fine, as expected --> 
<div> <canvas nx='button'></canvas> </div> 

<!-- this is my rendering container --> 
<div class="nxContainer"></div> 
<!-- and a template that should contain a "dial" widget --> 
<script type="text/html" id="test"> 
    <div data-content="widget"> </div> 
</script> 

<!-- counter example to make sure that loadTemplate is actually working --> 
<div class="Container"></div> 
<script type="text/html" id="test2"> 
    <div data-content="text"> </div> 
</script> 

$(function() { 

    var nxus = { 
     widget: "<canvas nx='dial'></canvas>", 
     text: "Boo!" 
    } 
    $(".nxContainer").loadTemplate("#test", nxus); 
    $(".Container").loadTemplate("#test2", nxus); 

});

http://jsfiddle.net/745vhffb/4/

编辑： 所以周围的一些戳更多，并通过nexusUI库的源代码，看后，它看起来像我找到了一个解决方案，我更新了我的小提琴，现在正在修订＃9（我超过了我的发布链接配额）。

nx.elemTypeArr.push("myslide"); 
var mySlider = "myslide"; 
var x = new slider('myslide'); 
x.init();

所以基本上，它看起来像我必须照顾与nx注册新的小部件和实例化它。

来源

2014-09-24 djiamnot

嗨djiamnot，对不起，我错过了这个，当你第一次问它。是的，您使用的nexusUI的版本仅在window.onload触发时发现在页面上的画布。尽管nexusUI的最新版本有一个'nx.add（“dial”）''方法，它可以让你随时动态地为你的页面添加小部件。该版本** nexusUI 1.0 **于12月在[nexusosc.com]（http://nexusosc.com）上发布， – suncannon 2015-04-20 21:01:32

所以这里有一个完整的解决方案，以我的问题：

function instantiateWidget(container, template, widgetType, id, destination){ 
    var sub = { 
     widget: "<canvas nx='" + widgetType + "' id='" + id + "'></canvas>" 
    } 
    $(container).loadTemplate(template, sub); 
    nx.elemTypeArr.push(id); 
    eval(id + " = new " + widgetType + "('" + id + "', " + destination + ");"); 
    eval(id + ".init();"); 
}

然后

instantiateWidget("#nxContainer", "#test", "dial", "local");

，这将填充模板中的容器：

<div id="nxContainer"></div> 

<script type="text/html" id="test"> 
    <div data-content-append="widget"> </div> 
</script>

NX的部件需要被实例化以便获得它们的画布上下文并且只有它们变得可用。这可能是一种更优雅的方式，但现在它会为我做。

来源

2014-09-25 04:42:55 djiamnot

jQuery模板中的nexusUI小部件

回答

相关问题