Remove knockout js bindings on cloned element - javascript

I am using the knockout js template binding functionality to render a collection of items to an element:
<script type="text/javascript">
ko.applyBindings(new function () {
this.childItems = [{ Text: "Test", ImageUrl: "Images/Image.png" }];
});
</script>
<script type="text/html" id="template">
<div class="childItem" data-bind="attr: { title: Text }">
<img data-bind="attr: { src: ImageUrl }" />
</div>
</script>
<div class="childSelector" data-bind="template: { name: 'template', foreach: childItems }">
</div>
When clicked, the child items are cloned and placed into another element:
$(".childSelector").on("click", ".childItem", function () {
var clone = $(this).clone()[0];
ko.cleanNode(clone);
$(".targetNode").append(clone);
});
The problem is that when the source data changes and the template is re-bound to the new data, the following error is thrown:
Uncaught Error: Unable to parse bindings. Message: ReferenceError:
Text is not defined; Bindings value: attr: { title: Text }
I had found another post that suggested using ko.cleanNode(element) to remove knockout's bindings, however this has not resolved the issue in my case.
Is there a way to remove knockout's bindings on a cloned element to prevent this error when re-binding? If not I'll just "manually" clone the element by extracting the required data from the clicked element.
Here is a simple example of what I'm doing

You can remove all knockout bindings from an element by traversing the DOM and removing the data-bind attributes and knockout comments.
Use removeDataBindings(clone); but first clean the node with ko.cleanNode(clone) to clear any event handlers.
var commentNodesHaveTextProperty = document.createComment("test").text === "<!--test-->";
var startCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*-->$/ : /^\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*$/;
var endCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*\/ko\s*-->$/ : /^\s*\/ko\s*$/;
function isStartComment(node) {
return (node.nodeType == 8) && (commentNodesHaveTextProperty ? node.text : node.nodeValue).match(startCommentRegex);
}
function isEndComment(node) {
return (node.nodeType == 8) && (commentNodesHaveTextProperty ? node.text : node.nodeValue).match(endCommentRegex);
}
function traverseNode(node, func) {
func(node);
node = node.firstChild;
while (node) {
traverseNode(node, func);
node = node.nextSibling;
}
}
function removeDataBindings(element) {
var koComments = [];
traverseNode(element, function (node) {
if (isStartComment(node) || isEndComment(node)) {
koComments.push(node);
return;
}
//remove the 'data-bind' attributes
if (node.nodeType === 1) { //ELEMENT_NODE
node.removeAttribute('data-bind');
}
});
//remove Knockout binding comments
for (i = 0; i < koComments.length; i++) {
node = koComments[i];
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
}

Oliver, using jQuery to clone elements bound to knockout like this is not a good idea. You should be using data-binding for the targetNode. If you haven't yet done so, its a good idea to go through the Knockout Tutorials to get a good understanding of the basic uses.
If you are trying to keep a list of items, with a clone button, here is a dead simple fiddle using nothing but Knockout to do so. If you are trying to do something else, let me know; your question isn't entirely clear on your goal.
HTML:
<div data-bind="foreach: items">
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.clone">Clone</button></br>
</div>
JS:
var ViewModel = function(data) {
var self = this;
self.items = ko.observableArray(data);
self.clone = function(item) {
//The ko.toJS here is a handy copy tool for viewModels
//It isn't necessary for simple arrays like this one
//But I included it because for an array of objects, you will want to use it
self.items.push(ko.toJS(item));
};
};

Related

how to execute local method from Ext.Template and Ext.apply methods

I want to execute a local method in Ext.Template context.
The method should be a member in the class.
I tried the following code and it doesn't work.
Someone know of can I pass the function member to onClick event?
requires: ['Ext.XTemplate'],
alias : 'widget.countlinkcolumn',
func: 'this.handleFilter'
renderer: function(val,metaData,rec,b,c,d,f){
var categoryId = 3;
var colTemplate = new Ext.Template(
'<div class="drill_down_link grid_cell_link" style="cursor: pointer; float:right" onclick="{on_click}({categoryId})">{text}</div>' +
'</div>');
var tpl = colTemplate.apply({
text: text,
categoryId: categoryId,
on_click: this.func,
});
return tpl;
},
handleFilter: function (categoryId) {
console.log(categoryId);
},
});
Never found an simple solution to this problem... The XTemplate can't directly call ExtJS code from it (it's actually already rendered in the DOM)...
The workaround we found is to render the XTemplate in a View (But you can do it with apply()) then listening to the itemClick event.
In the listener we get the DOM element and we can get some additional data from an attribute (eg: data-categoryId):
xtype: 'view',
listeners: {
itemClick: 'onItemClick',
}
// Additional attribute (data-categoryId) that store the categoryId
tpl: '<div data-categoryId="{categoryId}" class="drill_down_link">{text}</div>'
Then in the listener we can use this additional attribute after we checked that the correct button was clicked (by his class name but you can use other attribute)
onItemClick: function(dataView, record, item, index, e, removeAll){
var me = this,
target = e && e.target,
targetClass = target && target.getAttribute("class");
//Clicked on link (identified by his class name)
var isLink = targetClass && targetClass.indexOf("drill_down_link") >= 0;
if(isLink){
// Get the attribute value we setted in the XTemplate
var categoryId = target.getAttribute('data-categoryId');
}
}

Why my applyBindings doesn't work? Knockout

Hello I am trying simply to create input and iframe and when I paste the YouTube link the iframe should change with the new src. I have done this so far
<div class="heading">id <input data-bind="text: youtubeLink"/></div>
<iframe id="player" type="text/html" width="444" height="250" frameborder="0" data-bind="attr: { src: linkEmbed }"></iframe>
And in the script:
function MyViewModel() {
this.youtubeLink = ko.observable('https://www.youtube.com/watch?v=4UNkmlCKw9M');
this.linkEmbed = ko.pureComputed({
read: function () {
var extract = this.youtubeLink().replace("/watch?v=", "/embed/");
console.log(extract)
return extract;
},
write: function (value) {
this.youtubeLink();
},
owner: this
});
}
ko.applyBindings(MyViewModel());
This works exactly as I want but the video wont change if I paste another link in the input.
I am using this from knockout documentation: http://knockoutjs.com/documentation/computed-writable.html
You have several problems:
You don't call new on your model, but you wrote it as a constructor
You use text binding instead of value binding for your input
Your computed's write doesn't assign, but you don't need it anyway
Once you correct those, it works.
function MyViewModel() {
var model = {};
model.youtubeLink = ko.observable('https://www.youtube.com/watch?v=4UNkmlCKw9M');
model.linkEmbed = ko.pureComputed(function () {
var result = model.youtubeLink().replace("/watch?v=", "/embed/")
return result;
});
return model;
}
ko.applyBindings(MyViewModel());
http://jsfiddle.net/ueoob7ne/2/
TLDR: jQuery hides knockout bind errors.
Another thing that breaks it....
jQuery is known to catch exceptions and hide them. I had to step through knockout-debug.js AND THEN jquery.js until i got to a part that looks like this (around line 3600)
// Only normal processors (resolve) catch and reject exceptions
process = special ?
mightThrow :
function() {
try {
mightThrow();
} catch ( e ) {
wouldn't you know it... I put a watch on (e) an here was what I found hidden in there:
Error: Unable to process binding "text: function(){return ko.toJSON(vm.model(),null,2) }"
Message: Multiple bindings (if and text) are trying to control descendant bindings of the same element

How to use bindingHandlers for this in KnockoutJs

I'm building a mobile app which requires a bunch of open/close tab. I'm trying to find a way to use bindingHandlers to reduce the amount of code. But I seem to miss something. Here's my fiddle.
http://jsfiddle.net/noppanit/4zRrZ/
And this is what I have
<a href="javascript:void(0)" data-bind="click: expandCommentsRatings">Rating
<div style="display:none" data-bind="visible: productCommentsRatingsVisiblity">
<div class="rating" style="width: 85%">3.5 Stars Rating</div>
</div>
</a>
<br/>
<a href="javascript:void(0)" data-bind="click: expandsReviews">Reviews
<div style="display:none" data-bind="visible: productReviewsVisiblity">
<div class="reviews">Reviews</div>
</div>
</a>
var Model = function () {
var productCommentsRatingsVisiblity = ko.observable(false);
var productReviewsVisiblity = ko.observable(false);
var expandCommentsRatings = function (item, event) {
productCommentsRatingsVisiblity(!productCommentsRatingsVisiblity());
if (productCommentsRatingsVisiblity() === false) {
$(event.target).removeClass('expanded');
} else {
$(event.target).addClass('expanded');
}
};
var expandsReviews = function (item, event) {
productReviewsVisiblity(!productReviewsVisiblity());
if (productReviewsVisiblity() === false) {
$(event.target).removeClass('expanded');
} else {
$(event.target).addClass('expanded');
}
};
return {
productCommentsRatingsVisiblity: productCommentsRatingsVisiblity,
productReviewsVisiblity: productReviewsVisiblity,
expandCommentsRatings: expandCommentsRatings,
expandsReviews: expandsReviews
}
};
ko.applyBindings(Model());
How do I reduce the duplication so I can reuse this code to other ViewModel as well. The reason I'm struggling is because I don't know how to pass productCommentsRatingsVisiblity or productReviewsVisiblity to allBindings dynamically. You need to know the name in order to get it.
Thanks.
Sorry for the late reply on this, but I have a solution using bindingHandlers.
The fiddle is here: http://jsfiddle.net/u3m7m/1/
I followed a strategy of creating a toggle bindingHandler which adds the specified class if it's not present on the element, or removes the class if it is. The only state needed to make this happen is the class list on the element, meaning you can delete all those state tracking observables from the model. In fact, this was the model I used:
var Model = function () {
// stuff
};
ko.applyBindings(Model());
The toggle bindingHandler looks like this:
ko.bindingHandlers['toggle'] = {
init: function (element, valueAccessor) {
var value = ko.unwrap(valueAccessor()),
clickHandler = function (e) {
if (!e) {
e = window.event;
}
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
var classes = (this.className||'').split(' '),
index = classes.indexOf(value);
if (index >= 0) {
classes.splice(index, 1);
} else {
classes.push(value);
}
element.className = classes.join(' ');
};
element.onclick = clickHandler;
if (element.captureEvents) {
element.captureEvents(Event.CLICK);
}
}
};
Which is hopefully not too complicated, the weird looking stuff with the e object is from here: http://www.quirksmode.org/js/introevents.html
Because I'm using the strategy of using classes only, I had to add to your CSS:
.expandable > div
{
display: none;
}
.expandable.expanded > div
{
display: block;
}
The state tracking is now removed from the html, and the data-bind is modified to use the toggle bindingHandler:
<a class="expandable" href="javascript:void(0)" data-bind="toggle: 'expanded'">Rating
<div>
<div class="rating" style="width: 85%">3.5 Stars Rating</div>
</div>
</a>
<br/>
<a class="expandable" href="javascript:void(0)" data-bind="toggle: 'expanded'">Reviews
<div>
<div class="reviews">Reviews</div>
</div>
</a>
Hopefully this is of some help to you.
I'm not sure this would help you,
I've reconstruct and optimize your code based on what you need.
This might give you some idea. You don't need custom binding handler to implement this.
here the working jsFiddle: http://jsfiddle.net/farizazmi/6E4Wz/2/
so, what do you need is to include property to control visibility of the item:
var data = [
{
'name' : 'test1',
'rateIsExpanded' : ko.observable(false),
'rating': 3.5,
'review': 'blabla1',
'reviewIsExpanded': ko.observable(false)
},
{
'name' : 'test2',
'rateIsExpanded' : ko.observable(false),
'rating': 1.5,
'review': 'blabla2',
'reviewIsExpanded': ko.observable(false)
}
];
and create a function will use to change state of visibility each data:
var Model = function () {
var self = this;
self.data = ko.observableArray(data);
self.expandRate = function(item)
{
console.log(ko.toJSON(item));
item.rateIsExpanded( ! item.rateIsExpanded() );
};
self.expandReview = function(item)
{
item.reviewIsExpanded( ! item.reviewIsExpanded() );
};
};
ko.applyBindings(Model());
You can do this simply by using an observableArray to hold your menu system, with properties for:
itemName - to hold top level menu items
expanded - to control the expansion of a submenu with child items
subMenu - to hold child items
On top of this, you need a simple function to toggle the visibility of each sub-menu when the parent is clicked. Then you can utilise the knockout visible attribute in your data-binding, which would be bound to the expanded property.
Here's a working JSFiddle and below is the code used:
JS view model:
var Model = function () {
var self = this;
self.tabs = ko.observableArray([
{ itemName: "Ratings",
expanded: ko.observable(false),
subMenu: ["option 1","option 2"]},
{ itemName: "Review",
expanded: ko.observable(false),
subMenu: ["option 1","option 2"]}
]);
self.toggleExpanded = function (item) {
item.expanded(!item.expanded());
}
};
ko.applyBindings(Model());
HTML Mark Up:
<ul data-bind="foreach: tabs">
<li><span data-bind="text: itemName, click: toggleExpanded"></span>:
<ul data-bind="foreach: subMenu">
<li data-bind="text: $data, visible: $parent.expanded">
</li>
</ul>
</li>
</ul>

Removing item from observablearray in Knockoutjs

I am trying to learn Knockoutjs and I am having some issues with adding and removing objects to an observablearray.
I have the following viewmodel in which I fetch some data from a webservice and populate some html. This works fine. But what does not work is removing items from the observablearray since it seems the click-event does not call removeEmployee.
function EmployeeViewModel(){
var self=this;
self.employees=ko.observableArray();
self.removeEmployee = function(item) {
self.employees.remove(item);
};
}
function success(data) {
EmployeeViewModel.employees=ko.mapping.fromJS(data);
ko.applyBindings(EmployeeViewModel);
};
ApiCall({
data: {
[get data]
},
onSuccess: function(data){success(data.result)}
});
and the following html:
<div data-bind="foreach: employees">
<h2>Hello, <span data-bind="text: full_name"> </span>!</h2>
<button data-bind="click: $parent.removeEmployee">Remove</button>
</div>
I have tried setting up a jsfiddle here: http://jsfiddle.net/8yX5M/ in which removing items does work. The difference is, that in the jsfiddle the items are not fetched from an external source and that I use removeEmployee rather than $parent.removeEmployee.
Any ideas why the non-jsfiddle version is not working ?
thanks
Thomas
Because your success function isn't setting the value of the observableArray, it is resetting the object's definition -
function success(data) {
EmployeeViewModel.employees(ko.mapping.fromJS(data));
ko.applyBindings(EmployeeViewModel);
};
Use the setter function on EmployeeViewModel.employees by using the () and passing in a value.
Turned out it was because I did not instantiate EmployeeViewModel to a global variable before mapping the data.
The working code is
'use strict';
var employeeViewModel=new EmployeeModel();
function EmployeeModel(){
var self=this;
self.employees=ko.observableArray();
self.removeEmployee = function(item) {
self.employees.remove(item);
};
}
function getEmployeesSuccess(data,controlIds) {
employeeViewModel.employees=ko.mapping.fromJS(data);
var _i=0;
for (var _total=controlIds.length; _i < _total; _i++) {
ko.applyBindings(employeeViewModel,$("#"+controlIds[_i])[0]);
}
};
/* Databinds employeedata to an array of controls */
/* controlIds=Array of controls*/
function DataBindEmployees(controlIds)
{
ApiCall({
data: {
[get data]
},
onSuccess: function(data){getEmployeesSuccess(data.result, controlIds)} });
};

durandaljs - how to query a DOM element from a widget after ready

I want to query a element in a durandaljs widget, when it's ready.
If i use the selector directly in the data-binding, the element will not be found:
html (no attached view):
<button id="myButton"></button>
<div data-bind="widget: { kind: 'myWidget', options: { btn: $('#myButton') } }"></div>
controller.js:
define(function (require) {
var ctor = function (element, settings) {
var btn = settings.options.btn;
// btn = $('#myButton'); // this will work, but i'm not sure if the DOM is
// currently ready in the constructor
btn.on("click", function () {
console.log("I want to be fired");
});
};
return ctor;
});
Whats the best way to query a DOM element from a durandal widget at start?
I'm not sure where the html fragment belongs to so there are two slightly different answers.
First I'd suggest that you don't pass in the btnas jQuery object ({btn: $('myButton')}) , when you're not sure that it already exists. It's probably better to pass in a selector {btn: '#myButton'} and let the widget figure out how to deal with it.
Does your widget have its own view.html and the button is defined inside? If that's the case than you should take a look at the viewAttached callback.
var ctor = function (element, settings) {
this.btn = settings.options.btn;
};
ctor.prototype.viewAttached = function (view){
var btn = $(this.btn, view);
if ( btn.length > 0 ) {
btn.on("click", function () {
console.log("I want to be fired");
});
}
}
If your widget doesn't have its own view.html than you should let the widget know by adding a view property to the settings object with a value of false.
Here's the paragraph from http://durandaljs.com/documentation/Creating-A-Widget/ that explains that.
Note: In some cases, your widget may not actually need a view. Perhaps it's just adding some jQuery behavior or applying an existing jQuery plugin to a dom element. To tell Durandal that there is no view to load and bind, add a view property to the settings object with a value of false inside your widget's constructor.
In that instance however you can only access elements that are already in the DOM when the widget is instantiated e.g.
var ctor = function (element, settings) {
settings.view = false;
this.btn = $(settings.options.btn);
if ( this.btn.length > 0 ) {
this.btn.on("click", function () {
console.log("I want to be fired");
});
}
};

Categories