TechnoBuzz

A Techno Blog, mainly about Java

Knockout Nuggets

1) Send an event on some screen action

Form:

< input type=”button” id=”Button1″ value=”Create My Event” data-bind=”event: { click:createGreatEvent } ” />

Model:

this.createGreatEvent = handleReset;

function handleReset() { alert event(‘Yay’);}

2) Display Label from model

Form:

< label data-bind=”text: myLabel()”>

Model:

this.myLabel = ko.observable(“”);

this.myLabel(“Yay”);

3) Bind to typical form objects

Form:
< tr>
< td data-bind=”with:myObj” >
< textarea size=70 id=’myTextVal’ rows=5 cols=100 data-bind=”value:$data.text” />
< /td>< /tr>
< tr>

< td data-bind=”with:myObj” >
< input type=’checkbox’ id=’displayByDefault’ data-bind=”checked: $data.awesome == ‘Y’ ” />
< /td>< /tr>

< td >
< select id=’questionTypeVal’ data-bind=”options:typeItems, optionsText: ‘text’, value: selectedType, event: {change: changedTypeEvent} ”

</select>
</td>
< /select>
< /td>
Model:

this.myObj = ko.observable(“”);

this.myObj = new Obj(”, ”, ”, ”, ”, ‘N’, ”, ”, ”, ‘Y’);

this.typeItems = ko.observableArray();

// choice list selected

this.selectedType = ko.observable();

this.typeItems.push(new OptionObj(“Text”, “Text Box”));
this.typeItems.push(new OptionObj(“TextArea”, “Text Area”));
this.typeItems.push(new OptionObj(“Date”, “Date”));

this.changedTypeEvent = handleTypeChoice;

function handleTypeChoice() {

if (this.selectedType() != null) {

var type = this.selectedType().id;

}}

4) Conditional Rendering with Templates

Model:

this.SetupQuestions = ko.observableArray();

this.templateToUse = function (item) {

var templateName;

if (item.type == “Text”) {
templateName = “temp1”;
}
else if (item.type == “TextArea”) {
templateName = “temp2”;
}

return templateName;
}

var myViewModel = new myProject();

ko.applyBindings(myViewModel);

myViewModel.SetupQuestions.push({

“myId”: “50001”,
“type”: “Text”
});

myViewModel.SetupQuestions.push({
“myId”: “50002”,
“type”: “TextArea”
});

Form:
< script type=”text/html” id=”temp1″>

< span data-bind=”template: { name: ‘QuestionAnswerChildTemplate’, data: $data }”>< /span>
< /script>

< script type=”text/html” id=”temp2″>

< span data-bind=”template: { name: ‘QuestionAnswerChildTemplate2′, data: $data }”>

< /span>

< /script>

< script type=”text/html” id=”QuestionAnswerChildTemplate”>
< input data-bind=”value : AnswerVal” />
< /script>

< script type=”text/html” id=”QuestionAnswerChildTemplate2″>

< textarea size=70 id=’questionTextVal’ rows=5 cols=100 data-bind=”value : AnswerVal” />
< /script>

< table >
< tbody data-bind=”template: { name: templateToUse, foreach: SetupQuestions }”>< /tbody>
< /table>

Advertisements

August 7, 2012 - Posted by | Uncategorized |

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: