1,024 views(since 2013/10/08)

VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Backborn.js でTodos のサンプルを組み込んでみた。

Visual Studio 2013 から MVC5でプロジェクトを作成するとデフォルトでTwitterBootstrap(CSS)のきれいなデザインが組み込まれます。

今回は、Visual Studio でBackborn.jsでサンプルが少ないことから(Knockout.jsは多いと思います)作成してみました。

※Backborn.js は有名なMVVMのフレームワークですので、省略します。

1. まずは、Backborn.jsのサンプルでおなじみのTodosを作ってみることにします。

http://localtodos.com/

Backborn_todos_0010

2.日本語の解析済みのサンプルソースコードはGitHubにありますので、これを参考にしながら、Visual Studio2013で作成します。

https://github.com/yuku-t/backbone-sample

3. Visual Studio 2013 でサンプルを作成してみました。

※私のサンプルは以下のGitHubにあげました!

https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos

Backborn_todos_0020

4.Windows Azureの 実行結果は以下のようになります。

実際のWeb Site (Windows Azure)は以下です。

http://vs-samples.azurewebsites.net/Home/Todos

もとのデザインが、TwitterBootstarpでないので、デザインが壊れましたので?

いや、たぶん、HTML TemplateがMVC5にコピペしただけではだめそう?

後でTwitterBootstrapのデザインをきれいに修正しますが、こんな感じで動きます。

Backborn_todos_0030

5. 文字化けしていた原因がわかりました。

underscore.js のテンプレートを使用しているのですが。

Visual Studio にサンプルを張り付けると、自動でHTMLのソースを整形機能がきいていて、下記の赤い部分が自動で補完されていて表示が、化けていました。

※HTML貼り付け時、checkboxの後ろに自動的に [>]が補完される。

<input type=”checkbox”> <%= done ? ‘checked=”checked”‘ : ” %> />

後で、HTMLを手修正するか、Visual Studioの ツール/オプションの

テキストエディター/HTML/詳細設定 の貼り付けをFalseにすると自動成型しないです。

Backborn_todos_0040

Filed Under: .NETJavaScript

Tags:

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.