0

Durandal を使用して D3.js を操作するデモを作成しています。スターターキットを改造しました。

Welcome と Flickr の 2 つのビューがあります。新しいビュー 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 を使用する方法ですか? ありがとう！

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 に答える