Hi:
I have gone through the tutorials on the Knockout.js web-site. I am now converting them to classic asp.net (sans mvc).
Using the ms asp:TextBox, the sample (tutorial #1) converted without a problem, but I am having a problem with telerik:RadTextBox controls. So, with telerik if I just tab through the knockout bound value is lost and the control is empty.
In my master page:
Standard MS asp controls.
My RadTextBox:
I have tried both
Phil
I tried to attach a zip but it would not accept a zip...
I have gone through the tutorials on the Knockout.js web-site. I am now converting them to classic asp.net (sans mvc).
Using the ms asp:TextBox, the sample (tutorial #1) converted without a problem, but I am having a problem with telerik:RadTextBox controls. So, with telerik if I just tab through the knockout bound value is lost and the control is empty.
In my master page:
<
telerik:RadScriptManager
ID
=
"knockoutAppScriptManager"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Path
=
"Scripts/jquery-1.5.1.js"
/>
<
asp:ScriptReference
Path
=
"Scripts/knockout-2.1.0.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<%@ Page Title="Knockout | Tutorial #1" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial1.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial1" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"HeadContent"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"MainContent"
runat
=
"server"
>
<!-- learn.knockoutjs.com -->
<
p
>First name: <
strong
><
asp:Label
ID
=
"firstNameLabel"
runat
=
"server"
data-bind
=
"text: firstName"
/></
strong
></
p
>
<
p
> Last name: <
strong
><
asp:Label
ID
=
"lastNameLabel"
runat
=
"server"
data-bind
=
"text: lastName"
/></
strong
></
p
>
<
p
> Full name: <
strong
><
asp:Label
ID
=
"fullNameLabel"
runat
=
"server"
data-bind
=
"text: fullName"
/></
strong
></
p
>
<
p
>First name: <
asp:TextBox
ID
=
"firstNameTextBox"
runat
=
"server"
data-bind
=
"value: firstName"
/></
p
>
<
p
> Last name: <
asp:TextBox
ID
=
"lastNameTextBox"
runat
=
"server"
data-bind
=
"value: lastName"
/></
p
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Go caps"
data-bind
=
"click: capitalizeLastName"
/>
<!-- js code -->
<
script
type
=
"text/javascript"
>
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function () {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function () {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</
script
>
<!-- end of content -->
</
asp:Content
>
My RadTextBox:
<%@ Page Title="Knockout | Tutorial #1" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial1Rad.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial1Rad" %>
<%@ Register TagPrefix="Telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"HeadContent"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"MainContent"
runat
=
"server"
>
<!-- learn.knockoutjs.com -->
<
p
>First name: <
strong
><
asp:Label
ID
=
"firstNameLabel"
runat
=
"server"
data-bind
=
"text: firstName"
/></
strong
></
p
>
<
p
> Last name: <
strong
><
asp:Label
ID
=
"lastNameLabel"
runat
=
"server"
data-bind
=
"text: lastName"
/></
strong
></
p
>
<
p
> Full name: <
strong
><
asp:Label
ID
=
"fullNameLabel"
runat
=
"server"
data-bind
=
"text: fullName"
/></
strong
></
p
>
<
p
>First name: <
telerik:RadTextBox
ID
=
"firstNameTextBox"
runat
=
"server"
data-bind
=
"text: firstName"
/></
p
>
<
p
> Last name: <
telerik:RadTextBox
ID
=
"lastNameTextBox"
runat
=
"server"
data-bind
=
"text: lastName"
/></
p
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Go caps"
data-bind
=
"click: capitalizeLastName"
/>
<!-- js code -->
<
script
type
=
"text/javascript"
>
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function () {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function () {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</
script
>
<!-- end of content -->
</
asp:Content
>
I have tried both
data-bind
=
"text: firstName"
and
data-bind
=
"value: firstName"
Phil
I tried to attach a zip but it would not accept a zip...