Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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