Updated demo to show binding works

Author: sitefinitysteve

README.md

@@ -64,16 +64,14 @@ public getCheckProp() {
 - **text** - text to use with the checkbox
 - **fillColor** - Color of the checkbox element
 
-## Events
-- **checkedChanged** - When the state of the checkbox changes
-
 ## API
 
 - **toggle()** - Change the checked state of the view to the inverse of its current state.
 
-## Styling
+## Css Styling
 
 - **color** - set the text label color
+- **font-size** - checkbox is sized to text from here 
 - **border-width** - set the line width of the checkbox element: iOS only
 
 ## Demo Setup

checkbox.ios.ts

@@ -22,7 +22,7 @@ export class CheckBox extends Button implements CheckBoxInterface {
   private _checked: boolean;
   private _fillColor: string = "#0075ff";
   private _tintColor: string = "#0075ff";
-  private _lineWidth: number;
+  private _lineWidth: number = 1;
   private _hideBox: boolean;
   private _boxType: number;
   private _tint: string;
@@ -223,17 +223,13 @@ export class CheckBox extends Button implements CheckBoxInterface {
   }
 
   public _onCheckedPropertyChanged(data: PropertyChangeData) {
-    console.log("_onCheckedPropertyChanged to " + data.newValue);
-      debugger;
       if(this._iosCheckbox){
             this._iosCheckbox.setOnAnimated(data.newValue, true);
       }
   }
 }
 
 function onCheckedPropertyChanged(data: PropertyChangeData) {
-  console.log("onCheckedPropertyChanged to " + data.newValue);
-  debugger;
     var checkbox = <CheckBox>data.object;
     checkbox._onCheckedPropertyChanged(data);
 }
@@ -264,7 +260,6 @@ class BEMCheckBoxDelegateImpl extends NSObject implements BEMCheckBoxDelegate {
     public didTapCheckBox(checkBox: BEMCheckBox): void {
       let owner = this._owner.get();
         if (owner) {
-                console.log("delegate check " + checkBox.on);
             owner._onPropertyChangedFromNative(CheckBox.checkedProperty, checkBox.on);
         }
     }

demo/app/app.css

@@ -34,7 +34,7 @@ Label {
     color: #FFF;
     border-radius: 4;
     font-size: 10;
-    margin:0 20;
+    padding: 5 9;
 
 }
 
@@ -50,7 +50,7 @@ CheckBox{
     color: white;
     border-color: yellow;
     border-width: 1;
-    font-size: 15;
+    font-size: 20;
 }
 
 .demosection{

demo/app/main-page.ts

@@ -6,6 +6,7 @@ import { android } from "application";
 import { HelloWorldModel } from './main-view-model';
 import { DataItem } from './main-view-model';
 import { CheckBox } from 'nativescript-checkbox';
+import { Label } from 'ui/label';
 
 let model: HelloWorldModel;
 let page: Page;
@@ -35,7 +36,7 @@ export function onTapTest(args){
     model.updateMessage();
 }
 
-export function onCheckedTest(args: any){
-    debugger;
-    model.state = "Checkbox is " + (args.checked ? "checked" : "not checked");
+export function onDumpModel(args: any){
+    var label = <Label>page.getViewById("modelDumpLabel");
+    label.text = JSON.stringify(model.data.getItem(0));
 }

demo/app/main-page.xml

@@ -8,7 +8,7 @@
     <Label text="Functions" class="title" />
     <StackLayout class="listitem">
       <GridLayout columns="*, auto" class="demosection">
-        <CheckBox:CheckBox id="toggleTest" col="0" text="toggle()" checked="false"  />
+        <CheckBox:CheckBox id="toggleTest" col="0" text="toggle()" checked="false" style="margin-right: 10"  />
         <Button col="1" text="GO" tap="onToggleTest" class="button" />  
       </GridLayout>
     </StackLayout>
@@ -30,6 +30,11 @@
         <Label text="{{ eventLabel }}" textWrap="true" class="message" />
     </StackLayout>
 
+    <Label text="Debug" class="title" />
+    <StackLayout class="listitem">
+        <Button text="View Model" tap="onDumpModel" class="button" style="horizontal-align: left;" />
+        <Label id="modelDumpLabel" textWrap="true" class="message" />
+    </StackLayout>
   </StackLayout>
 </ScrollView>
 

demo/app/main-view-model.ts

@@ -7,9 +7,6 @@ import observableArrayModule = require("data/observable-array");
 
 export class HelloWorldModel extends Observable {
   public data: observableArrayModule.ObservableArray<DataItem>;
-  public check1: DataItem;
-  public check2: DataItem;
-  public check3: DataItem;
   private _eventLabel: string;
   private _state: string;
   private _eventCount: number;