質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1425閲覧

mithril jsの使い方に関して

MasakazuFukami

総合スコア1869

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/12/06 17:36

今mithril.jsを使用しているのですがクリックしたときにデータを更新&viewをリレンダリングする方法がわからずこまっています。。。

やろうとしていることは
・コメントリストの表示
・コメントリストには親コメント、子コメントがある
・各コメントにはいいねをすることが出来る

ソースは以下になります。
保存できるようにhtmlのまま貼っております!

html

1 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <title>Mithril</title> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script> 8 <style> 9 /*ul,li{list-style: none;}*/ 10 </style> 11</head> 12<body> 13 <div id="example"></div> 14 <script> 15 16 var Todo = { 17 model: function(){ 18 this.list = m.prop([ 19 { 20 id: 1, 21 comment: 'hello world!', 22 isFaved: true, 23 replies: [ 24 { 25 id: 10, 26 comment: 'hello I am child!', 27 isFaved: true 28 }, 29 { 30 id: 11, 31 comment: 'hello I am child! child!', 32 isFaved: true 33 }, 34 { 35 id: 12, 36 comment: 'hello I am child! child!!!!!', 37 isFaved: true 38 } 39 ] 40 }, 41 { 42 id: 2, 43 comment: 'hello world222!', 44 isFaved: true, 45 replies: [] 46 }, 47 { 48 id: 3, 49 comment: 'hello world222!', 50 isFaved: false, 51 replies: [ 52 { 53 id: 31, 54 comment: 'this is my comment', 55 isFaved: true 56 } 57 ] 58 } 59 ]) 60 this.description = m.prop('hahah') 61 }, 62 controller: function(){ 63 this.vm = new Todo.model(); 64 this.vm.fav = function(item){ 65 item.isFaved = true 66 } 67 }, 68 view: function(ctrl){ 69 return m('body', [ 70 m('ul', [ 71 ctrl.vm.list().map(function(item){ 72 return m('li', {style: {borderBottom: 'solid 1px #000'}}, [ 73 m('span', {style: {marginRight: '15px'}}, item.comment), 74 m('span', item.isFaved ? 'ふぁゔぉなう' : 'ふぁぼふぉるす'), 75 m('ul', [ 76 item.replies.map(function(_item){ 77 return m('li', [ 78 m('span', {style: {marginRight: '15px'}}, _item.comment), 79 m('span', {onclick: function(){/* ここで_item.isFavedを反転したい */}}, _item.isFaved ? 'ふぁゔぉなう' : 'ふぁぼふぉるす') 80 ]) 81 }) 82 ]) 83 ]) 84 }) 85 ]) 86 ]) 87 } 88 } 89 90 m.mount(example, Todo) 91 </script> 92</body> 93</html>

子コメントのonclickを推した際に_item.isFavedが反転するようにしたいです。。。

どなたがご教授ジュいただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

回答がつかないようなので取り急ぎ。

  1. onclickを実行するspanタグにid属性をつける。
  2. m.withAttrでクリックしたidをモデルに渡す。onclick: m.withAttr("id", /* item.isFavedを変更するためのモデルを呼び出し */)
  3. モデル側で該当idのitem.isFavedを書き換え(this.listを更新)
  4. モデルの最後にm.redraw();で再描画。

という感じの流れになると思います。

投稿2016/12/21 06:47

watanabe9434

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問