0

我正在构建一个演示来使用 Durandal 与 D3.js 一起工作。我在 Starter Kit 上进行了修改。

它有两个视图：Welcome 和 Flickr。我添加了一个新视图图表并在我的视图中复制了一些 d3js 可视化 javascript 代码：

<section>
    chart demo
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    //more scripts

    <div id="container" style="height: 500px; min-width: 500px"></div>

    <script type="text/javascript">
    d3 visualization code here.     
    </script>

    chart end
</section>

但我发现在 Durandal 的观点中，不能包含 JavaScript 代码。上面的代码只能显示类似：

chart begin
a empty box of size style="height: 500px; min-width: 500px"
chart end

似乎所有的 javascirpt 代码都被 Durandal 自动删除了。

我的问题是如何在 Durandal 视图中使用 JavaScript？谢谢！

4

1 回答 1

1

您可以利用 durandal 视图模型的 viewAttached 函数来执行 d3 代码。像这样：

define(function (require) {
    var vm = {};

    vm.viewAttached = function (view) {
        // d3 visualization code here
        // use class names to find the container instead of id and you can have multiple instances on the same page

        d3.select(view).select(".d3container") 
            .classed("well", true)
            .text('I just styled this div using the magic of D3.');
    };

    return vm;
});
于 2013-07-15T06:41:54.530 回答