Search Results

Search found 3 results on 1 pages for 'bindinghandlers'.

Page 1/1 | 1 

  • With custom binding for Masonry how would I resize the container appropriately

    - by BigDubb
    Based on the suggestion give here, and the information given here on how to make a custom bindingHandler for a forEach, I decided to attempt to write my own custom binding for a forEach and Masonry. Because the elements are added on the fly the redrawing and moving around of elements to fill the space doesn't occur. So, this functionality needed to be moved after the elements have been rendered or called after each item has been added. Here is my bindingHandler ko.bindingHandlers.masonry = { init: function (element, valueAccessor, allBindingsAccessor) { var $element = $(element), originalContent = $element.html(); $element.data("original-content", originalContent); //var msnry = new Masonry($element); return { controlsDescendantBindings: true } }, update: function (element, valueAccessor, allBindingsAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), //get the list of items items = value.items(), //get a jQuery reference to the element $element = $(element), //get the current content of the element elementContent = $element.data("original-content"); $element.html(""); var container = $element[0]; var msnry = new Masonry(container); for (var index = 0; index < items.length; index++) { (function () { //get the list of items var item = ko.utils.unwrapObservable(items[index]), $childElement = $(elementContent); ko.applyBindings(item, $childElement[0]); //add the child to the parent $element.append($childElement); msnry.appended($childElement[0]); })(); msnry.layout(); msnry.bindResize(); } } }; and the HTML implementing the handler. <div id="criteriaContainer" data-bind="masonry: { items: SearchItems.Items }"> <div class="searchCriterion control-group"> <label class="control-label" data-bind="text: Description"></label> <div class="controls"> <input type="hidden" data-bind="value: Value, select2: { minimumInputLength: 3, queryUri: SearchUri(), placeholder: Placeholder(), allowClear: true }" style="width: 450px"> </div> <p data-bind="text: Value"></p> </div> </div> When this shows up on the page It stacks all if the elements rendered via the append method right on top of each other. You can see in my bindingHandler I am calling bindResize as well as layout(), neither of which seem to be having any effect. Here's a screenshot of what it looks like in the UI.

    Read the article

  • how to reapply knockout binding

    - by MikeW
    Currently I have a knockout binding that stripes rows in a list which works fine ko.bindingHandlers.stripe = { update: function (element, valueAccessor, allBindingsAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); //creates the dependency var allBindings = allBindingsAccessor(); var even = allBindings.evenClass; var odd = allBindings.oddClass; //update odd rows $(element).children(":nth-child(odd)").addClass(odd).removeClass(even); //update even rows $(element).children(":nth-child(even)").addClass(even).removeClass(odd); ; } } Triggered from <button data-bind="click: addWidget" style="display:none">Add Item</button> The problem I have is when reloading data from the server , I call addWidget() manually in the view model the stripe binding handler is not applied - all rows appear as same color, if I click the html button then the binding happens and stripes appear var ViewModel = function() { self.addWidget(); }); Is it possible to reapply this custom binding manually in js? Thanks Edit: The stripe binding gets applied like so <div data-bind="foreach: widgets, stripe: widgets, evenClass: 'light', oddClass: 'dark'">

    Read the article

  • Durandal Google Maps not showing properly

    - by user1891037
    Trying to show Google Maps using the Durandal. I'm now simply working with Durandal HTML Starter Kit so the other modules and all engine works properly. The thing is when I added the Google Map it doesn't fit the div size (the big part of div is just grey). As I understand, the problem is causing because Google Maps added before page is completely loaded. But I can't figure out how can I hook on page load event. Here is the module code: define(['knockout', 'gmaps'], function (ko, gmaps) { return { displayName: 'Google Maps', myMap: ko.observable({ lat: ko.observable(32), lng: ko.observable(10)}), activate: function () { console.log('activate'); ko.bindingHandlers.map = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { console.log('init'); var mapObj = ko.utils.unwrapObservable(valueAccessor()); var latLng = new gmaps.LatLng( ko.utils.unwrapObservable(mapObj.lat), ko.utils.unwrapObservable(mapObj.lng)); var mapOptions = { center: latLng, zoom: 5, mapTypeId: gmaps.MapTypeId.ROADMAP}; mapObj.googleMap = new gmaps.Map(element, mapOptions); } } }, attached: function() { console.log('attached'); }, compositionComplete: function() { console.log('compositionComplete'); } }; }); And a very simple HTML code: <section> <div id="gmap-canvas" data-bind="map:myMap"></div> </section> I'm loading Google Maps with async plug-in in my shell.js. It works fine. Screenshot with trouble here - http://clip2net.com/s/ibswAa P.S. div size is defined in .CSS file. P.S. I tried to use getElementById approach provided here and it's work great if placed in compositionComplete block. But when I tried to move my bindings to this block nothing happens at all. Thanks!

    Read the article

1