Bye Bye Moore


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

……何? MarkDownエディタ? ……ちゃんとできたらアップロードします何卒何卒……



package main

import (

type BookData struct {
	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>

    <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!
		<button v-on:click="Button">Button</button>
		Title:<input v-model="input_title" />
		Content:<input v-model="input_content" />
		<ul v-for="book in bookdatas">
		    <li>{{book.title}} - {{book.content}}</li>
		<button v-on:click="AddNewBook">Add New Book</button>
    <script type="text/javascript" src="basic.js"></script>