Knockout Template in foreach access specific template item - javascript

I am populating a list of survey questions. On click of a survey question, a modal with graphs of the results pop up. To create my list I am using a knockout template as I need the afterRender function.
Here's my markup:
<div id="priorityMenuW" class="priorityMenuW shadow">
<div class="menuHeader">Select a Survey Question:</div>
<div id="priorityMenu" data-bind="foreach:questionTypes">
<div class="menucategory menuItem" data-toggle="tooltip" data-bind="text:CategoryName, attr:{title:CategoryName}"></div>
<div class="menuitem" data-toggle="tooltip" data-bind="foreach:$root.questions">
<!-- ko if: CategoryName == $parent.CategoryName-->
<div data-bind='template: { name: "question-template",
data:$root.questions,
afterRender: $root.storeQuestionIdOrder }'>
</div>
<!-- /ko -->
</div>
</div>
</div>
And my template:
<code><script type="text/html" id="question-template">
<div class="menuItem" data-toggle="tooltip" data-bind="html:'• '+ $parent.QuestionText, attr:{title:$parent.QuestionText}, css: {'itemSelected' : $root.isPriorityActive($data)}, click: function($data,event){$root.questionChoice($data,event)}"></div></script></code>
My problem is that by sending $data to the function questionChoice, I am receiving an array of all of the templated objects. How can I access the specific object clicked on? I was thinking maybe $data[$index], but that doesn't work.

if you want to use $data[$index], remember that $index is an observable and needs to be evaluated:
$data[$index()]

Related

Knockout 'attr' data bindings with function throws error when using a custom binding provider

We have 60-70 cshtml pages in our ASP.NET MVC Project with a lot of knockout implementations in it.
We decided to add CSP to our current application to prevent it from unsafe inline scripts and eval() functions. So i added CSP policies to my MVC App builder and then provided nonce to allow my inline scripts. To make Knockout CSP complaint , i had to use a custom binding provider (https://github.com/brianmhunt/knockout-secure-binding) . After which few of my knockout bindings started working fine and i stopped seeing the 'CSP policy violation' errors in the browser console.
But even then a lot of them are still not working (i get 2 uncaught errors on console but more than 2 binding fail) each of which have 'attr' knockout binding.
I was not able to find any relevant sources on web to resolve these errors and since they are knockout internal script related , i am not able to make head or tail of it.
I've been trying to fix the bindings on the first dashboard page before going ahead.
Custom Binding provider:
var options = {
attribute: "data-bind",
globals: window,
bindings: ko.bindingHandlers,
noVirtualElements: false
};
ko.bindingProvider.instance = new ko.secureBindingsProvider(options); enter code here
HTML Block for one of the binding (Entire HTML is too long) (_Layout.cshtml):
<!-- Banner -->
<div id="bannerCarousel" class="bannerContainer">
<div id="topCarousel" class="topBannerSlider carousel slide" data-ride="carousel" data-pause="hover">
<ol tabindex="0" id="bannercarousel-indicators" class="carousel-indicators" role="tablist" data-bind="foreach: { data: carouselBanners, as: 'carouselBanner' }">
<li class="active" data-target="#topCarousel" data-bind="attr: { 'data-slide-to': $index(),'title':'Slide '+($index()+1),'id': 'bannertab-0-' + $index(), 'aria-controls': 'bannertabpanel-0-' + $index(),'aria-label':'Slider '+($index()+1)+'tab, To activate tab page press Enter.' }">
<span class="sr-only" data-bind="text: carouselBanner.Title+' '+carouselBanner.Tagline+' '+carouselBanner.Description"></span>
</li>
</ol>
<ul class="bannerslider carousel-inner" data-bind="foreach: { data: carouselBanners, as: 'carouselBanner' }, topCarouselActive">
<li class="item active" role="tabpanel" data-bind="attr: {'id': 'bannerslidertabpanel-0-' + $index(), 'aria-labelledby':'bannerslidertab-0-' + $index()}">
<div data-bind="attr: { class: $root.currentClass(carouselBanner.BannerClass) }">
<div class="row">
<div class="col-md-8">
<div class="bannerContent">
<h1 class="bannerTitle" data-bind="text: carouselBanner.Title"></h1>
<h2 class="bannerTagline" data-bind="text: carouselBanner.Tagline"></h2>
<p class="bannerDesc" data-bind="text: carouselBanner.Description"></p>
<!--button class="bannerBtnReadMore btn">Read More</button-->
</div>
</div>
<div class="col-md-4">
<div class="bannerImage bannerImage1" data-bind="if: (carouselBanner.LogoUrl != '' && carouselBanner.LogoUrl != null && carouselBanner.LogoUrl != 'undefined') ">
<img data-bind="attr:{src: carouselBanner.LogoUrl}" alt="" />
</div>
</div>
</div>
</div>
</li>
</ul>
<a role="button" href="javascript:void(0)#topCarousel" class="left carousel-control" data-slide="prev" title="Previous Slide">
<i class="ose-fo ose-icon-arrow-left"></i>
</a>
<a role="button" href="javascript:void(0)#topCarousel" class="right carousel-control" data-slide="next" title="Next Slide">
<i class="ose-fo ose-icon-arrow-right"></i>
</a>
</div>
</div>
<!-- Banner -->
The Javascript file (viewmodel.carousel.js):
function Carousel() {
EstimatorApp.AccessService.getCarouselDetail(null, function (data) {
if (data.IsSuccess) {
if (data.Result) {
var viewModel = {
carouselBanners: ko.observableArray(data.Result),
currentClass: function (bannerClass) {
return "globalBanner bannerBgImg " + bannerClass;
},
};
ko.applyBindings(viewModel, document.getElementById("bannerCarousel"));
}
}
});
}
The Carousel function is called in _Layout.cshtml.
The errors in the browser console:
In message expanded view:
1st Error:
2nd Error:
Both the bindings fails at this line (2824):
I do not have much idea of the internal working of knockout so if anyone can help i would really appreciate it.
Thank you.

Run a jQuery function when all knockout.js has rendered [duplicate]

I have implemented a knockout foreach binding, with multiple templates in the same page, one of the example is given here, what I am interested is in finding out when a block finishes rendering, I have tried afterRender and afterAdd, but I guess it runs for each element, and not after the whole loop is finished.
<ul data-bind="foreach: {data: Contacts, afterAdd: myPostProcessingLogic}">
<li>
<div class="list_container gray_bg mrgT3px">
<div class="list_contact_icon"></div>
<div class="contact_name"><span data-bind="text: first_name"></span> <span data-bind="text: last_name"></span></div>
<div class="contact_number"><span data-bind="text: value"></span></div>
<div class="callsms_container">
<a href="#notification-box" class="notifcation-window">
<div class="hover_btn tooltip_call">
<div class="hover_call_icon"></div>
<span>Call</span></div>
</a>
<a class="sendsms" href="#sendsms" rel="#sendsms">
<div class="hover_btn tooltip_sms">
<div class="hover_sms_icon"></div>
<span>SMS</span></div>
</a>
<a href="#">
<div class="hover_more_btn"></div>
</a>
</div>
<!-- close callsms container -->
<div id="notification-box" class="notification-popup">
<img class="btn_close" src="images/box_cross.png" /> <img class="centeralign" src="images/notification_call.png" /> <span>Calling... +44 7401 287366</span> </div>
<!-- close notification box -->
<!-- close list gray bg -->
<div class="tooltip_description" style="display:none" id="disp"> asdsadaasdsad </div>
</div>
</li>
</ul>
I am interested in finding out just the success callback, when a loop finishes rendering.
here is my afterAdd function, which basically attaches some jQuery events, and nothing much.
myPostProcessingLogic = function(elements) {
$(function(){
$(".list_container_callog").hover(function(){
$(".callsms_container", this).stop().animate({left:"0px"},{queue:false,duration:800});
}, function() {
$(".callsms_container", this).stop().animate({left:"-98%"},{queue:false,duration:800});
});
});
}
thanks in advance, and tell me there is a success callback :)
You have the afterRender callback in knockout.js:
foreach: { data: myItems, afterRender: renderedHandler }
Here's documentation.
Inside your handler check whether the length of the rendered collection is equal to the length of the items collection. If not don't execute the full rendered logic that you intend to use.
renderedHandler: function (elements, data) {
if ($('#containerId').children().length === this.myItems().length) {
// Only now execute handler
}
}
Try wrapping the ul with
<div data-bind='template: {afterRender: myPostProcessingLogic }'>
It will only work the first time everything within the template is rendered. But you will only get the one call to myPostProcessingLogic. Here's a fiddle
<div data-bind='template: {afterRender: myPostProcessingLogic }'>
<ul data-bind="foreach: Contacts">
<li>
<div class="list_container gray_bg mrgT3px">
<div class="list_contact_icon"></div>
<div class="contact_name"><span data-bind="text: first_name"></span> <span data-bind="text: last_name"></span></div>
<div class="contact_number"><span data-bind="text: value"></span></div>
<div class="callsms_container">
<a href="#notification-box" class="notifcation-window">
<div class="hover_btn tooltip_call">
<div class="hover_call_icon"></div>
<span>Call</span></div>
</a>
<a class="sendsms" href="#sendsms" rel="#sendsms">
<div class="hover_btn tooltip_sms">
<div class="hover_sms_icon"></div>
<span>SMS</span></div>
</a>
<a href="#">
<div class="hover_more_btn"></div>
</a>
</div>
<!-- close callsms container -->
<div id="notification-box" class="notification-popup">
<img class="btn_close" src="images/box_cross.png" /> <img class="centeralign" src="images/notification_call.png" /> <span>Calling... +44 7401 287366</span> </div>
<!-- close notification box -->
<!-- close list gray bg -->
<div class="tooltip_description" style="display:none" id="disp"> asdsadaasdsad </div>
</div>
</li>
</ul>
</div>
Chuck Schneider's answer above is the best.
I had to use containerless control as the foreach is on a tbody element:
<!-- ko template: {afterRender: SetupCheckboxes } -->
<tbody data-bind="foreach: selectedItems" id="gridBody">
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
</tbody>
<!-- /ko -->
Just wrap the foreach into another foreach loop using Knockout's container less method like this:
<!-- ko foreach:{data: Contacts, afterRender: myPostProcessingLogic }-->
<ul data-bind="foreach: $data}">
<li>
<div class="list_container gray_bg mrgT3px">
<div class="list_contact_icon"></div>
<div class="contact_name"><span data-bind="text: first_name"></span> <span data-bind="text: last_name"></span></div>
<div class="contact_number"><span data-bind="text: value"></span></div>
<div class="callsms_container">
<a href="#notification-box" class="notifcation-window">
<div class="hover_btn tooltip_call">
<div class="hover_call_icon"></div>
<span>Call</span></div>
</a>
<a class="sendsms" href="#sendsms" rel="#sendsms">
<div class="hover_btn tooltip_sms">
<div class="hover_sms_icon"></div>
<span>SMS</span></div>
</a>
<a href="#">
<div class="hover_more_btn"></div>
</a>
</div>
<!-- close callsms container -->
<div id="notification-box" class="notification-popup">
<img class="btn_close" src="images/box_cross.png" /> <img class="centeralign" src="images/notification_call.png" /> <span>Calling... +44 7401 287366</span> </div>
<!-- close notification box -->
<!-- close list gray bg -->
<div class="tooltip_description" style="display:none" id="disp"> asdsadaasdsad </div>
</div>
</li>
</ul>
<!-- /ko -->
The solution above works great. Additionally, if you need to use the foreach "as" option you can do it as so:
data-bind="foreach: { data: myItems, afterRender: renderedHandlet, as: 'myItem'}">
In version 3.5 Knockout provides events to notify when the contents of a node have been bound
HTML
<div data-bind="childrenComplete: bindingComplete">...</div>
JavaScript
function bindingComplete(){
...
}
If you an create event binding expression at a point in the DOM that encapsulates all your child data binding expression, then it's tantamount to a page binding complete event
reference
https://knockoutjs.com/documentation/binding-lifecycle-events.html
I have just recently made a pull request with knockout for them to add two events to define in the binding, unwrap, then call in the correct spots before rendering the items and after all items have rendered. I haven't heard anything back from them but this does exactly what you want to do but you don't have to write hacky code to get it to work. I'm surprised that nobody has made this request before. I used these callbacks that I added to the source to destroy and reinitialize a knockout bound jquery datatable. This was the simplest solution. I have seen many attempts online that try and do it differently but this is the simplest solution.
Pull request: --> pr 1856
ko.bindingHandlers.DataTablesForEach = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var nodes = Array.prototype.slice.call(element.childNodes, 0);
ko.utils.arrayForEach(nodes, function(node) {
if (node && node.nodeType !== 1) {
node.parentNode.removeChild(node);
}
});
return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor()),
key = "DataTablesForEach_Initialized";
var newValue = function() {
return {
data: value.data || value,
beforeRenderAll: function(el, index, data) {
if (ko.utils.domData.get(element, key)) {
$(element).closest('table').DataTable().destroy();
}
},
afterRenderAll: function(el, index, data) {
$(element).closest('table').DataTable(value.options);
}
};
};
ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);
//if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
ko.utils.domData.set(element, key, true);
}
return {
controlsDescendantBindings: true
};
}
};
Knockout Datatables JSFiddle
Try afterRenderAll callback in knockout.js:
foreach: { data: myItems, afterRenderAll: myPostProcessingLogic }

How to set default session and dropdown values in meteor?

I have a collection which store default values according to the logged in user. I have a setting menu where default can be set for the application by the user. How can we set the dropdown of that setting menu to the default value set previously by user every time and how can we set the default session value. I'm using semantic UI and isron router, I'm trying to get the default values from the collection in .onRendered(), but the output will be Values:
Template.header.onRendered (function(){
var defaultSettingValues=defaultSetting.find().fetch()
console.log ("Values: "+defaultSettingValues);
});
The dropdown in settng menu:
<div class="ui selection dropdown button" id="defaultDrop" tabindex="0">
<input type="hidden" name="filter">
<div class="default text">Select from here</div>
<i class="right floated dropdown icon"></i>
<div class="menu" tabindex="-1">
<div class="item" data-value="objId1">abc</div>
<div class="item" data-value="objId2">def</div>
<div class="item" data-value="objId3">hij</div>
</div>
</div>
I'm trying to get the default setting values from collections and then set the session and set the default dropdown.
How can i solve this? or is there any alternate way in which i can achieve this?
Ok so you can set default value of your dropdown with the following code :
Template.header.onRendered (function(){
// Care because it returns an array, and you just need the default value
var defaultSettingValues=defaultSetting.find().fetch();
// Supposing the defaultSettingValues is equals to 'objId1'
$('#defaultDrop').dropdown('set selected', defaultSettingValues);
});
You need to find a way to get your value from what's returning your collection.
I think you should be using helpers in order to achieve this in a good way.
In the Html template
<template name="The_template">
<div class="ui selection dropdown button" id="defaultDrop" tabindex="0">
<input type="hidden" name="filter">
<div class="default text">Select from here</div>
<i class="right floated dropdown icon"></i>
<div class="menu" tabindex="-1">
{{#each option in options}}
<div class="item" data-value="objId1">{{option.someData}}</div>
{{/each}}
</div>
</div>
</template>
Then in the javascript template
Template.The_template.helpers({
options() {
return Collection.find();
}
})

Dynamically adding items to HTML list

I'm currently building a wizard in asp.net MVC 5 application using knockout. On one of the steps, I need to add items to an html list. that is, text is enter into a textbox and you click the added button, the text is added to the list.
My template:
<script type="text/html" id="addProduct">
<li class="dd-item bordered-inverse animated fadeInDown">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<a data-bind="attr: { 'href': '#' }" class='btn btn-xs icon-only success'><i class="fa fa-trash-o"></i></a>
<label data-bind="text: Name, uniqueName: true"></label>
</label>
</div>
</div>
</li>
</script>
<div class="row">
<div class="col-md-6">
<div id="newProduct" class="dd">
<ol class="dd-list" data-bind="template: { name: 'addProduct', foreach: Model.Step1.ProductServices }"></ol>
</div>
</div>
</div>
input textbox:
#Html.TextBoxFor(model => model.Step1.ProductService, new { data_bind = "value: Model.Step1.ProductService")
<button type="button" id="addservice" data-bind="event:{ click: AddProduct }">Add Service/Product</button>
knockout add event:
self.AddProduct = function () {
self.Model.CurrentStep().ProductServices.push({ name: self.Model.CurrentStep().ProductService });
}
self.Model.CurrentStep().ProductServices is a List Product as just one property name.
The code above add an item to the html list and updates the UI, but self.Model.CurrentStep().ProductServices.length is always zero, meaning nothing was added to the Model itself.
Please how can I force it to update the self.Model.CurrentStep().ProductServices?
length is not a property of an observableArray. Check ProductServices().length instead.

Collection-Repeat and $ionicModal Strange Behavior

I am making a directory app that comprises roughly 200 list items (employees). The app worked as intended using ng-repeat, however, it was sluggish to load. I switched to Collection-Repeat to take advantage of the speed boost but I am getting bizarre behaviors that I can't figure out.
The list items are rendering correctly, alphabetically with the category titles added successfully. The problem is, each list item has a ng-click attribute that opens an $ionicModal. The modal for each item opens, but the loaded data is incorrect.
When the modal opens, it starts at the bottom of the page - I can see the contents for half a second before it animates to the middle of the screen. To start, the loaded data is correct. As it animates, it switches to another employees data. I can't seem to figure out why. I'm new to angular/ionic so any pointers would be great. Thanks!
EDIT - Out of curiousity, I added a second ng-controller="ModalCtrl" ng-click="openModal();" to each element as a button. Clicking on the element does the usual - opens the modal with the wrong employee. Clicking on the newly created button however creates TWO modals (stacked on eachother) BOTH with the correct employee. Removing either instance to the ng-controller or ng-click puts me back at square one with only one modal of incorrect data. Why is this? Why does adding a second ng-click correct the problem (despite having two modals)?
EDIT - Here is a link to a codepen sample (dumbed down, but proves my issue: http://codepen.io/anon/pen/zijFv?editors=101
My HTML looks like this:
<div class="list">
<a class="item my-item"
collection-repeat="row in contacts"
collection-item-height="getItemHeight(row)"
collection-item-width="'100%'"
ng-class="{'item-divider': row.isLetter}">
<!-- ADDED BUTTON SEE EDIT COMMENT ABOVE -->
<button ng-if="!row.isLetter" ng-controller="ModalCtrl" ng-click="openModal();">Click</button>
<img ng-controller="ModalCtrl" ng-click="modal.show()" ng-if="!row.isLetter" ng-src="data:image/jpeg;base64,{{row.image}}">
<h2>{{row.title || (row.firstname+' '+row.lastname)}}</h2>
<p ng-if="!row.isLetter"><em>{{row.jobtitle}}</em></p>
</a>
</div>
My Modal HTML is this:
<header class="bar bar-header bar-lsi">
<h1 class="title">Contact Information</h1>
<div class="button button-clear" ng-click="closeModal()">
<span class="icon ion-close"></span>
</div>
</header>
<ion-content has-header="true" style="margin-top: 0px !important;">
<div class="list card" style="border-radius: 0px !important;">
<div class="item item-avatar item-text-wrap">
<img ng-src="data:image/jpeg;base64,{{row.image}}">
<h2>{{row.firstname}} {{row.lastname}}</h2>
<p>{{row.jobtitle}}</p>
</div>
<a href="tel:{{row.phone}}" class="item item-icon-left">
<i class="icon ion-iphone"></i>
{{row.phone}}
</a>
<a href="mailto:{{row.email}}" class="item item-icon-left">
<i class="icon ion-email"></i>
{{row.email}}
</a>
</div>
</ion-content>
And then I have my basic controller:
.controller('ModalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
I think the problem is that you aren't passing to the modal template any value. It's getting residual values. I see too that you are using too much ng-controller and ng-click in items list and what is inside it. I mean, if you use ng-click for A.item, you don't need to use ng-click for the image inside it.
Let's see some code:
<a class="item my-item"
collection-repeat="row in contacts"
collection-item-height="getItemHeight(row)"
collection-item-width="'100%'"
ng-class="{'item-divider': row.isLetter}"
ng-controller="ModalCtrl" ng-click="openModal(row);">
<img ng-if="!row.isLetter" ng-src="http://placehold.it/65x65">
<h2>{{row.title || (row.firstname+' '+row.lastname)}}</h2>
<p ng-if="!row.isLetter"><em>{{row.jobtitle}}</em></p>
</a>
As you can see, I've removed all ng-click and ng-controller inside A tag, and I've left only what is attributes of A tag. You can notice too that I pass the object row to the openmModal() function.
In controller, I've made next changes:
$scope.openModal = function(item) {
$scope.modal.row = item;
$scope.modal.show();
};
And in the modal template I've used modal.row as variable with the data from the item list touched. So in template I use it like this:
<div class="item item-avatar item-text-wrap">
<img ng-src="http://placehold.it/65x65">
<h2>{{modal.row.firstname}} {{modal.row.lastname}}</h2>
<p>{{modal.row.jobtitle}}</p>
</div>
<a href="tel:{{modal.row.phone}}" class="item item-icon-left">
<i class="icon ion-iphone"></i>
{{modal.row.phone}}
</a>
<a href="mailto:{{modal.row.email}}" class="item item-icon-left">
<i class="icon ion-email"></i>
{{modal.row.email}}
</a>
I've test it in your codepen and it works. Try it and tell me if it works for you.

Categories