在Durandal視圖中運行Javascript

Question

我正在構建一個演示，以使用Durandal與D3.js一起使用。 我在入門工具包上進行了修改。

它有兩個視圖：Welcome和Flickr。 我添加了一個新的視圖Chart並在視圖內復制了一些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？ 謝謝！

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