Am using Knockout External Template https://github.com/ifandelse/Knockout.js-External-Template-Engine
But how to clear newly binded value and text from External template. my html code something like this
HTML
<ul data-bind="template: { name: 'RegistrationForm.html' }"></ul>
<div data-bind="click:Add"></div>
Scripts When i click add, Form Value from 'RegistrationForm.html' will bind to a grid, but on the same time i need to clear all bind value from 'RegistrationForm.html'. Assume i have many fields and some text binding on the selected template. so my question how to clear bind text and form value from Templates when on button click.
Actual Scenario :
When opened a user template then value and text related to the corresponding user will bind to that template. but when i click next user with out any value the first user vale remains there. am using one template for all user)
thanks
EDIT My code like this structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Templates</title>
<style>
.clear {
clear: both;
}
</style>
<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="lib/knockout-3.3.0.js"></script>
<script type="text/javascript" src="lib/koExternalTemplateEngine_all.js"></script>
<script>
$(function(){
function pop1(data)
{
this.a = ko.obeservable(data.a || '');
this.b = ko.obeservable(data.b || '');
}
function pop2(data)
{
this.c = ko.obeservable(data.c || '');
this.d = ko.obeservable(data.d || '');
}
Viewmodel = function(){
self = this;
self.obj = new Object();
self.name = {
id:1
name:'test'
};
self.types = [
{
id:1
name:'test'
},
{
id:2
name:'test2'
}
];
self.whichPopup = fucntion(){
switch (name()){
case '1':
//Load Template for this option
//This wil b a user form with some value will bind when on laod
var data {}; // data with a and b
self.obj = new pop1(data);
break;
case '2':
//Load Template for this option
var data {}; // data with c and d
self.obj = new pop1(data);
break;
}
};
};
}); </script>
</head>
<body>
<div class="Temp">
<div class="temp1">
<div data-bind="template:{name : 'Template1.html'}"></div>
</div>
<div class="clear"></div>
<div class="temp2">
<div data-bind="template:{name : 'Template2.html'}"></div>
</div>
<div class="clear"></div>
<select class="submission_type"
data-bind="options: types,
optionsText : 'name',
value: name,
optionsCaption:'---Select---'
">
</select>
<div data-bind="template:{name : whichPopup}"></div>
<!-- This part working -->
<!--
Table here
i need to add multiple entried here,
so will add users here
1- Select type
2- Tempalte will opened in a popup
3- Save to,then dispaly to the grid
-->
<!--
1- Selcted option type that i hav already added before for to add same type but diffrent user
2- popup1 will opened
3- but it have the values that i have first time added
4- if it was text box only then i can clear but it have some text binding to a div too
-->
</div>
</body>
</html>
UPDATE I have changed the concept, let me know how to disable caching template in knockout External template. so far i have tried :
infuser.defaults.ajax.cache = false
but not working,i just need to refresh the template. thanks