data binding

CrossPlatformModules.csproj

@@ -61,6 +61,7 @@
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
   <ItemGroup>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\app.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\details-page.ts">
       <DependentUpon>details-page.xml</DependentUpon>
@@ -69,6 +70,7 @@
       <DependentUpon>main-page.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-app-view-model.ts" />
+    <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
     <Content Include="apps\cuteness.unoptimized\reddit-item-view-model.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-model.d.ts" />
     <TypeScriptCompile Include="apps\action-bar-demo\app.ts" />

apps/action-bar-demo/main-page.xml

@@ -6,6 +6,7 @@
       <Button tap="itemTap" text="navigation button" tag="navigation-button" />
       <Button tap="itemTap" text="action items icons" tag="action-items-icon" />
       <Button tap="itemTap" text="action items text" tag="action-items-text" />
+      <Button tap="itemTap" text="data binding" tag="data-binding" />
     </StackLayout>
   </ScrollView>
 </Page>

apps/action-bar-demo/pages/data-binding.ts

@@ -0,0 +1,58 @@
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    vm.set("title", "title");
+    vm.set("navText", "navText");
+    vm.set("firstItemText", "txt");
+    vm.set("secondItemIcon", "res://ic_test");
+    vm.set("mainIcon", "res://ic_test");
+    vm.set("navIcon", "res://ic_test");
+    vm.set("firstItemTap", function () {
+        console.log("firstItemTap");
+    });
+    vm.set("secondItemTap", function () {
+        console.log("secondItemTap");
+    });
+    vm.set("navTap", function () {
+        console.log("navTap");
+    });
+    page.bindingContext = vm;
+}
+var i = 0;
+export function buttonTap(args) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+    var vm = page.bindingContext;
+    var icon;
+    if (i % 3 === 0) {
+        icon = "res://ic_test";
+    }
+    else if (i % 3 === 1) {
+        icon = "~/action-bar-demo/test-icon.png";
+    }
+    else if (i % 3 === 2) {
+        icon = undefined;
+    }
+    vm.set("title", "title " + i);
+    vm.set("navText", "navText " + i);
+    vm.set("firstItemText", "txt " + i);
+    vm.set("secondItemIcon", icon);
+    vm.set("mainIcon", icon);
+    vm.set("navIcon", icon);
+    vm.set("firstItemTap", function () {
+        var j = i;
+        console.log("firstItemTap " + j);
+    });
+    vm.set("secondItemTap", function () {
+        var j = i;
+        console.log("secondItemTap " + j);
+    });
+    vm.set("navTap", function () {
+        var j = i;
+        console.log("navTap " + j);
+    });
+    i++;
+}

apps/action-bar-demo/pages/data-binding.xml

@@ -0,0 +1,14 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="{{ title }}" icon="{{ mainIcon }}">
+      <NavigationButton text="{{ navText }}" icon="{{ navIcon }}" tap="{{ navTap }}"/>
+      <ActionBar.actionItems>
+        <ActionItem text="{{ firstItemText }}" tap="{{ firstItemTap }}"  iosPosition="left"/>
+        <ActionItem icon="{{ secondItemIcon }}" tap="{{ secondItemTap }}" iosPosition="right"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" tap="buttonTap"/>
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/page-title-icon.ts

@@ -35,4 +35,3 @@ export function visibilityTap(args: observable.EventData) {
     j++;
     console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
 }
-

ui/action-bar/action-bar-common.ts

@@ -57,13 +57,13 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
     set navigationButton(value: NavigationButton) {
         if (this._navigationButton !== value) {
             if (this._navigationButton) {
-                detachActionItem(this._navigationButton);
+                this._navigationButton.actionBar = undefined;
             }
 
             this._navigationButton = value;
 
             if (this._navigationButton) {
-                attachActionItem(this._navigationButton, this);
+                this._navigationButton.actionBar = this;
             }
 
             this.updateActionBar();
@@ -130,6 +130,15 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         }
     }
 
+    public _onBindingContextChanged(oldValue: any, newValue: any) {
+        super._onBindingContextChanged(oldValue, newValue);
+        if (this._navigationButton) {
+            this._navigationButton.bindingContext = newValue;
+        }
+
+        this._actionItems.getItems().forEach((item, i, arr) => { item.bindingContext = newValue; });
+    }
+
     public shouldShow(): boolean {
         if (this.title ||
             this.icon ||
@@ -157,9 +166,7 @@ export class ActionItems implements dts.ActionItems {
         }
 
         this._items.push(item);
-
-        attachActionItem(item, this._actionBar);
-
+        item.actionBar = this._actionBar;
         this.invalidate();
     }
 
@@ -173,9 +180,8 @@ export class ActionItems implements dts.ActionItems {
             throw new Error("Cannot find item to remove");
         }
 
-        detachActionItem(item);
-
         this._items.splice(itemIndex, 1);
+        item.actionBar = undefined;
         this.invalidate();
     }
 
@@ -271,16 +277,3 @@ export class ActionItem extends ActionItemBase {
 export class NavigationButton extends ActionItemBase {
 
 }
-
-function attachActionItem(item: ActionItemBase, bar: ActionBar) {
-    item.actionBar = this._actionBar;
-    item.bind({
-        sourceProperty: "bindingContext",
-        targetProperty: "bindingContext"
-    }, this._actionBar);
-}
-
-function detachActionItem(item: ActionItemBase) {
-    item.actionBar = undefined;
-    item.unbind("bindingContext");
-}

ui/page/page-common.ts

@@ -10,8 +10,6 @@ import actionBar = require("ui/action-bar");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 
-var OPTIONS_MENU = "optionsMenu";
-
 var navigationBarHiddenProperty = new dependencyObservable.Property(
     "navigationBarHidden",
     "Page",