Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る その2:追記・確認が可能なTODOリストをつくってみる

Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る」第二回として、
追記・確認が可能なTODOリストをつくってみました。
……何? MarkDownエディタ? ……ちゃんとできたらアップロードします何卒何卒……

実際のところ

とりあえず、文字だけ並ぶやつ

package main

import (
	"github.com/gopherjs/gopherjs/js"
	"github.com/oskca/gopherjs-vue"
)

type BookData struct {
	*js.Object
	Title    string `js:"title"`
	Content string `js:"content"`
}

type Model struct {
	*js.Object        // this is needed for bidirectional data bindings
	Result        string `js:"result"`
	Flag            bool `js:"flag"`
	BookDatas  []*BookData      `js:"bookdatas"`
	InputTitle string `js:"input_title"`
	InputContent  string `js:"input_content"`
}

// this would be recognized as Inc in html
func (m *Model) Button() {
	m.Flag = !(m.Flag)
}

func NewBook(title string, content string) *BookData {
	t := &BookData{
		Object: js.Global.Get("Object").New(),
	}
	t.Title = title
	t.Content = content
	return t
}


func (m *Model) AddNewBook() {
// append利用は公式で非推奨
// 配列Pushがよい
	vm := vue.GetVM(m)
	bookdatas := vm.Get("bookdatas")
	vue.Push(bookdatas, NewBook(m.InputTitle, m.InputContent))
}

func main() {
	m := &Model{
		Object: js.Global.Get("Object").New(),
	}

	m.Result = "as string"
	m.Flag = true
	
	m.InputTitle = ""
	m.InputContent = ""
	
        m.BookDatas = []*BookData{ NewBook("first book", "Good Day"),
	NewBook("second book", "Nice one!"),
	}
	vue.New("#app", m)
}
<!DOCTYPE html>
<html>

<body>
    <div id="app" v-cloak>
        <div>str: {{ result }} </div>
	
	    <span v-bind:title="result" v-if="flag">
		Hover your mouse over me for a few seconds
		to see my dynamically bound title!
	    </span>
	    <div>
		<button v-on:click="Button">Button</button>
	    </div>
	    <div>
		Title:<input v-model="input_title" />
		Content:<input v-model="input_content" />
	    </div>
	    <div>
		<ul v-for="book in bookdatas">
		    <li>{{book.title}} - {{book.content}}</li>
		</ul>
		<button v-on:click="AddNewBook">Add New Book</button>
	    </div>
    </div>
    <script type="text/javascript" src="basic.js"></script>
</body>

</html>

CSSも何もないので、実にシンプルな概観ですf:id:shuzo_kino:20170523235547p:plain