Smalltalk › Amber Smalltalk

using knockout.js from amber

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

4 messages Options

laci

using knockout.js from amber

I am looking for amber solution for subscribing to observables - see http://knockoutjs.com/documentation/observables.html.

Attached please find three files:
1. Html file is a plain Javascript implementation.
Please note the functionality related to the first column of checkboxes.
It hides/disables the second column checkboxes if turned off.
Else shows/enables and sets by default the check box to true.
(I am interested in solving this with amber.)
2. Knockout.st - Knockout wrapper - follows the pattern kindly suggested by Norbert.
3. ProofOfConcept.st - amber implementation of calling Knockout
UserFacilities open "should do the trick"

<body>
<div class="container"><div id="dyn_content"> </div></div>
...
</body>
Thanks in advance.
knockout.html
Knockout.st
ProofOfConcept.st

laci

Re: using knockout.js from amber

After little bit of digging in, the code is quite simple.

I was looking for this statement:
< return property['subscribe'].call(property, block); >.

where the block is the subscription callback for the specified property.

Object subclass: #Facility
instanceVariableNames: 'model id name selected enabled selectedSubscription'
package: 'ProofOfConcept'!

!Facility methodsFor: 'not yet classified'!

initSubscription: property callback: block
< return property['subscribe'].call(property, block); >.
!

initSubscriptions
selectedSubscription := self initSubscription: (model at: 'selected') callback: [:value | self onSelectedChange: value].
!

initialize
"create Knockout view model and configure subscriptions"
model := < {} >.
model at: 'id' put: (Knockout observable).
model at: 'name' put: (Knockout observable).
model at: 'selected' put: (Knockout observable).
model at: 'enabled' put: (Knockout observable).
self initSubscriptions.
!

onSelectedChange: value
(model at: 'enabled') value: value
! !

laci

Re: using knockout.js from amber

Knockout.st Knockout.js

laci

Re: using knockout.js from amber

Guys,
I'd like to draw your attention to Knockout. It is a mature well documented implementation of Model-View-View Model pattern. I have created few sample scripts - see attached files - implementing some of the test cases available at http://blog.stevensanderson.com/2011/12/21/knockout-2-0-0-released/.

In your index page create a container <body><div id="dyn_content"></div></body>
Dependencies: jquery, knockout and optionally bootstrap.
After loading Knockout.st make sure to call
smalltalk.Knockout._prepare();

Different test cases are implemented as Knockout class methods.
Each method comment contains the appropriate command.

Good luck and look forward to your comments.