Question

我正在使用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注册新的小部件并实例化它。

Answer 1

所以这是我的问题的完整解决方案：

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小部件以获取其画布上下文，然后它们才可用。这可能是一种更优雅的方式，但现在它将为我做。

nexusUI小部件在jQuery模板中

1 个答案: