2016-11-27 30 views
0

私はriot.jsでアプリケーションを開発していますので、dropzone(http://www.dropzonejs.com/)を使いたいと思います。私のコードでriot.jsでルータを使用する際にライブラリを使用するにはどうすればよいですか?

:index.htmlを以下

、以下

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <app></app> 
 
    <script src="dist/scripts/bundle.js"></script> 
 
</body> 
 

 
</html>

app.tag、

var route = require('riot-route'); require("dropzone"); require('./main/home.tag'); require('./main/contents1.tag'); 
 

 
<app> 
 
    <main> 
 
    <contents></contents> 
 
    </main> 
 
    <script> 
 
    route(function(tagName) { 
 
     tagName = tagName || 'home' 
 
     riot.mount('contents', tagName) 
 
    }) 
 
    route.start(true) 
 
    </script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" /> 
 
</app>

以下home.tag、その後

<home> 
 
    <div class="search-box"></div> 
 
</home>

、私はこのようなapp.tagに<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>を追加し、それが正しい動作します。

<contents></contents> 
 
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

しかし、私はそれが動作しません

<home> 
 
    <div class="search-box"></div> 
 
    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> 
 
</home>

、このようhome.tagにそれを追加します。誰も私を助けることができますか?

答えて

1

タグを装着する際にドロップゾーンを更新しようとすると、(「マウント」に関する使用して、あるいはまた、あなたは(「更新」上で試すことができ、

<home> 
    <div class="search-box"></div> 
    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> 
    <script> 
    this.on('mount', function(){ 
     new Dropzone(".dropzone"); 
    }) 
    </script> 
</home> 
+0

はあなたの助けをありがとうございました!私は追加する必要がありましたもう一つの行 'var Dropzone ='新しいDropzone( "dropzone"); 'の上に' 'dropzone ''が必要ですが、動作しました!ありがとう! – Ryochan

+0

あなたは歓迎です。答えは正しい。 – vitomd

関連する問題