在Durandal视图中运行Javascript

问题描述

我正在构建一个演示，以使用Durandal与D3.js一起使用。我在入门工具包上进行了修改。

I am building a demo to use Durandal to work with D3.js. I modified on the Starter Kit.

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

It has two views: Welcome and Flickr. I added a new view Chart and copied some d3js visualization javascript code inside my view:

<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代码。上面的代码只能显示以下内容：

But I find that in a Durandal view, JavaScript code cannot be included. The above code can only display something like:

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

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

It seems that all the javascirpt code are removed automatically by Durandal.

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

My question is how to use JavaScript inside a Durandal view? Thanks!

推荐答案

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

You could leverage the viewAttached function of your durandal view model to execute d3 code. Like so:

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;
});

这篇关于在Durandal视图中运行Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！