回答編集履歴

Improve readability

2016/09/17 17:50

投稿

スコア393

answer CHANGED Viewed

@@ -9,8 +9,8 @@
 -----------
 以下のように書いてみてください。
-Riotは、this.でアクセスできるメンバーにバインドできます。
+Riotは、``this.``でアクセスできるメンバーにバインドできます。
-また、内部で非同期処理の後、プロパティを更新する場合は明示的に``update``を呼び出す必要があります。
+また、**内部で非同期処理の後、プロパティを更新する場合は明示的に``update``を呼び出す必要があります。**
 ```javascript
 this.onChange = (e) => {

Use const

2016/09/17 17:49

投稿

スコア393

answer CHANGED Viewed

@@ -14,15 +14,16 @@
 ```javascript
 this.onChange = (e) => {
-    var fileData = e.target.files[0];
+    const fileData = e.target.files[0];
-    var fileType = fileData.type;
+    const fileType = fileData.type;
     if(!fileType.match(/^image/)) {
         alert('画像を選択してください');
         return;
     }
-    var reader = new FileReader();
+    const reader = new FileReader();
     reader.onerror = () => {
         alert('ファイル読み取りに失敗しました')
     };

追記に対して追記

2016/09/17 17:44

投稿

スコア393

answer CHANGED Viewed

@@ -3,4 +3,37 @@
 ```javascript
 const filename = this.fileInput.files[0].name;
+```
+追記に対して
+-----------
+以下のように書いてみてください。
+Riotは、this.でアクセスできるメンバーにバインドできます。
+また、内部で非同期処理の後、プロパティを更新する場合は明示的に``update``を呼び出す必要があります。
+```javascript
+this.onChange = (e) => {
+    var fileData = e.target.files[0];
+    var fileType = fileData.type;
+    if(!fileType.match(/^image/)) {
+        alert('画像を選択してください');
+        return;
+    }
+    var reader = new FileReader();
+    reader.onerror = () => {
+        alert('ファイル読み取りに失敗しました')
+    };
+    reader.onload = () => {
+        this.preview = true;
+        this.previewSrc = reader.result;
+        this.update();
+        console.log(preview);
+    };
+    reader.readAsDataURL(fileData);
+};
 ```

Add example

2016/09/17 17:41

投稿

スコア393

answer CHANGED Viewed

@@ -1,2 +1,6 @@
 Riotにそういった機能はありません。公式ドキュメントに書いてあることが全てで、非常にシンプルです。
-name属性を与えた要素には``this.hoge``のようにしてアクセスできるので、それでファイルを取得します。
+name属性を与えた要素には``this.hoge``のようにしてアクセスできるので、それでファイルを取得します。
+```javascript
+const filename = this.fileInput.files[0].name;
+```