Permalink
Browse files

Move to jquery.mobile from spine.mobile

Signed-off-by: Wenwei Cai <stanley.w.cai@gmail.com>
  • Loading branch information...
1 parent 72a408d commit 9e1f5166c03f9f79972a155c222533aa267e5118 @swcai committed Mar 9, 2013
View
@@ -1,10 +1,10 @@
My Stock HTML5 application
TODO list
-- StockAdd default to active the input
- Optimize the refresh rate
- Add StockDetail Panel
-- Deploy on PhoneGap, testing on Android and Apple - Done
- Update the app Theme
- beautify the StockList panel
- code clean
+
+branch 'dev' - move to use jquery.mobile to beautify the app. Give up spine.mobile
@@ -1,57 +1,16 @@
Spine = require('spine')
-{Panel} = require('spine.mobile')
$ = Spine.$
Stock = require('models/stock')
-class StockAdd extends Panel
- title: 'Stock Add'
-
- elements:
- 'form': 'form'
-
- events:
- 'submit form': 'submit'
-
- constructor: ->
- super
-
- @log 'StockAdd instantiated!'
-
- @addButton('Cancel', @back)
- @addButton('Add', @submit).addClass('right')
-
- @active @render
-
- render: ->
- @log 'StockAdd renderred!'
- @html require('views/stocks/add')()
- $('input').focus
-
- back: ->
- @navigate('/stocks', trans: 'left')
-
- submit: (e) ->
- e.preventDefault()
- stock = Stock.fromForm(@form)
- console.log stock
- if stock.save()
- @navigate('/stocks', trans: 'left')
-
- deactive: ->
- super
- @form.blur()
-
-
-class StockDetails extends Panel
- title: 'Stock Details'
+# not to be used at this point
+class StockDetail extends Spine.Controller
+ title: 'Stock Detail'
constructor: ->
super
-
- @log 'StockDetails instantiated!'
+ @log "StockDetail instantiatized! #{@el.html()} #{@$el.html()}"
Stock.bind('change', @render)
@active (params) -> @change(params.id)
- @addButton('back', @back)
render: =>
return unless @item
@@ -65,54 +24,102 @@ class StockDetails extends Panel
@render
-class StockList extends Panel
- events:
- 'tap .item': 'click'
-
+class StockListItem extends Spine.Controller
+ className: 'stockList'
title: 'Stocks'
constructor: ->
super
-
- @log 'StockList instantiated!'
+ @log 'StockListItem instantiated!'
Stock.bind('refresh change', @render)
- @active Stock.updateAll
- @addButton('Refresh', @render)
- @addButton('Add', @add).addClass('right')
click: (e) ->
- console.log 'click'
- console.log $(e.currentTarget)
- item = Stock.all()[$(e.currentTarget).index()]
- @navigate('/stocks', item.id, trans: 'right')
-
- add: ->
- @navigate('/stocks/add', trans: 'right')
+ @navigate('/stocks', @item.id, trans: 'right')
render: =>
- console.log "render #{Stock.count()}"
- items = Stock.all()
- console.log require('views/stocks/item')(items)
- @html require('views/stocks/item')(items)
+ console.log "render #{require('views/stocks/item')(@item).html()}"
+ @html require('views/stocks/item')(@item)
+
+
+class StockListView extends Spine.Controller
+ constructor: ->
+ super
+ @log 'StockListView instantialized!'
+ Stock.bind('refresh', @addAll)
+ Stock.bind('create', @addOne)
+ @log "el #{@el.html()} #{@$el.html()}"
+
+ addOne: (item) =>
+ @log "addOne in StockListView"
+ stock = new StockListItem(item: item)
+ @append stock.render
+
+ addAll: =>
+ Stock.each(@addOne)
-class Stocks extends Spine.Controller
+class StockList extends Spine.Controller
+ events:
+ 'tap #stocklist_button_refresh' : 'addAll'
+ 'tap #stocklist_button_openpanel': 'openStockAddPanel'
+ 'tap #stocklist_button_cancel' : 'closeStockAddPanel'
+ 'tap #stocklist_button_add' : 'addStock'
+ # 'keypress #stocklist_input_code' : 'keyinput'
+
+ elements:
+ '#stocklist_input_code': 'code_input'
+ '#stocklist_panel_add': 'StockAddPanel'
+ '#stocklist_listview': 'listview'
+
+ constructor: ->
+ super
+ @log "StockList instantiatized! #{@el.html()} #{@$el.html()}"
+ @listview = new StockListView(el: '#stocklist_listview')
+
+ addAll: ->
+ @listview.addAll
+
+ openStockAddPanel: ->
+ @StockAddPanel.panel 'open'
+
+ closeStockAddPanel: ->
+ @StockAddPanel.panel 'close'
+
+ addStock: ->
+ @log '1'
+ code = @code_input.val()
+ @log code
+ stock = new Stock({code: code})
+ @log stock
+ stock.save()
+ @code_input.val('')
+ @StockAddPanel.panel 'close'
+
+ ###
+ keyinput: (e) =>
+ @log e
+ if e.keyCode == 13
+ @log 'gogo'
+ e.preventDefault()
+ @log "#{@addStock}"
+ @addStock
+ @log 'back'
+ ###
+
+class StockAppStack extends Spine.Stack
constructor: ->
super
- @log 'Stocks instantiated!'
- @list = new StockList
- @detail = new StockDetails
- @add = new StockAdd
+ @log 'StockAppStack instantiated!'
+ @list = new StockList(el: "#stocklist_page")
+ @detail = new StockDetail(el: "#stockdetail_page")
- console.log "start fetch"
- Stock.fetch()
- console.log "fetch done"
+ # console.log "start fetch"
+ # Stock.fetch()
+ # console.log "fetch done"
- @routes
- '/stocks/add': (params) -> @add.active(params)
- '/stocks/:id': (params) -> @detail.active(params)
- '/stocks': (params) -> @list.active(params)
+ @route '/stocks/:id', (params) -> @detail.active(params)
+ @route '/stocks', (params) -> @list.active(params)
-module.exports = Stocks
+module.exports = StockAppStack
View
@@ -2,17 +2,15 @@ require('lib/setup')
Spine = require('spine')
$ = Spine.$
-{Stage} = require('spine.mobile')
-Stocks = require('controllers/stocks')
+StockAppStack = require('controllers/stocks')
-class App extends Stage.Global
+class App extends Spine.Controller
constructor: ->
super
@log 'StockApp instantiated!'
- @stocks = new Stocks
-
+ @stack = new StockAppStack
Spine.Route.setup(shim: true)
- @log 'go StockList'
+ @log 'here we go'
@navigate '/stocks'
module.exports = App
@@ -1,11 +1,8 @@
require('json2ify')
require('es5-shimify')
-require('jqueryify')
require('spine')
require('spine/lib/local')
require('spine/lib/ajax')
require('spine/lib/manager')
require('spine/lib/route')
-
-require('spine.mobile')
@@ -8,31 +8,31 @@ class Stock extends Spine.Model
constructor: ->
super
- # Spine.Model.host = 'http://hq.sinajs.cn'
- # @default: -> new @(name: 'GREE Electronics', code: '000651', 'currentPrice': 0.0)
- @endpoint: 'http://hq.sinajs.cn/list='
+ endpoint: 'http://hq.sinajs.cn/list='
- @fetch: ->
+ load: (item) ->
super
- @updateAll
+ console.log "load #{item}"
+ @fetchPriceFromRemote item
+ @saveLocal
+ this
- @updateAll: =>
- console.log "fetch #{@count()}"
- @fetchPriceFromSite item for item in @all()
- @saveLocal()
-
- @fetchPriceFromSite: (item) =>
+ fetchPriceFromRemote: (item) =>
return unless item
+ console.log "item #{item}"
if item.code.charAt(0) == '6'
valname = 'sh' + item.code
url = @endpoint + 'sh' + item.code
else
valname = 'sz' + item.code
url = @endpoint + 'sz' + item.code
+ console.log "url #{url}"
$.ajaxSetup({cache: true})
$.getScript url, (data) =>
$.ajaxSetup({cache: false})
+ return unless data
+ console.log "data #{data}"
eval("data = hq_str_#{valname}")
vals = data.split(",")
item.updateAttributes(name: vals[0], currentPrice: vals[3])
@@ -1,6 +0,0 @@
-<form>
- <label>
- <span>Code</span>
- <input type="text" name="code" autofocus="autofocus">
- </label>
-</form>
@@ -1,9 +1,8 @@
-<div class="item">
- <table>
- <tr>
- <td><%= @name %></td>
- <td><%= @code %></td>
- <td><%= @currentPrice %></td>
- </tr>
- </table>
+<div class="stock_item">
+ <li><a href="#detail">
+ <h2><%= @name %></h2><%= @code %>
+ <p><strong><%= @currentPrice %></strong></p>
+ </a>
+ <a href="#delete"></a>
+ </li>
</div>
View
@@ -1,49 +0,0 @@
-@import './mixin'
-
-body, html
- height: 100%
-
-.viewport
- position: relative
-
- > *
- position: absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
-
- &:not(.active)
- display: none
-
-body.stage
- > header
- position: absolute
- left: 0
- top: 0
- right: 0
-
- > article
- position: absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
-
- > footer
- position: absolute
- left: 0
- bottom: 0
- right: 0
-
-.panel
- vbox()
-
- > article
- box-flex(1)
-
- overflow: auto
- -webkit-overflow-scrolling: touch
-
-@import './theme'
-@import './views/stocks'
Oops, something went wrong.

0 comments on commit 9e1f516

Please sign in to comment.