How to check if knockout has finished data binding - javascript

I am currently trying to implement the panelBar feature from KendoUI into an app at work. I have realized that kendoUI and KnockOut do not interact very well together. The main problem at the moment is the implementation of the panelBar is not working very well due to having a dynamic knockout property disrupting it. Here is the ko that I have found to interfere:
data-bind="foreach: filters
This little code is inside a div wrapping others. But the main problem is the foreach is interfering with KendoUI. I figure the way to fix this is by having some way of checking if knockout is finished all the binding, and THEN calling the code to implement kendoUI.
Thanks for any help!

Are you using the Knockout binding handlers for Kendo UI? If not, check out these binding handlers. In short, they help work out the interfaces between the two libraries. http://rniemeyer.github.com/knockout-kendo/

Related

Polymer - Load different components dynamically

I'm a Polymer novice, but I guess what the answer will be...
Recently I came across with this issue: I got to loop through a collection of elements (using dom-repeat) and display its contents. But every element has a unique display and bindings, making it almost impossible to display each element dynamically. The ideal scenario would be to load a different component for each display type, but it looks like there is no easy way to achieve this.
Some options I have been thinking of were the following:
Using dom-if but it would add crap to my resulting HTML.
Is there a dom-switch? If it were something like that and didn't leave empty template tags (as it would do with dom-if) it would be nice.
It's possible to load a component dynamically? Using something like this: <[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
Any other ideas? I would really appreciate any ideas or solutions or at least a workaround for my issue.
TL;DR; you can't
Polymer (and Web Components in general I guess) are best when used in a declarative way. Out-of-the-box your best solution is dynamically creating elements and adding to DOM or messy use of dom-if.
(potential) OPTION 1
I guess you could fairly easily implement a dom-switch element to work like
<template-switch switch="[[some.value]]">
<template-case case="10">
<element-one></element-one>
</template-case>
<template-case case="20">
<element-two></element-two>
</template>
<template-default>
<element-one></element-one>
</template-default>
</dom-switch>
I wrote this off the top of my head. There are multiple ways to implement such an element. A crucial decision is whether to use <template> internally or not. In this plunk I've implemented such element without templates but simply using content distribution.
OPTION 2
There is also Polymer.Templatizer.
Faced with a similar issue of choosing element to render dynamically I created this Plunk as a proof of concept.
As you see, you extend the <template> element with custom rules, which match against a model. You then bind the matched template's nodes with the model using Polymer.Templatizer.
Thanks to Templatizer, you don't have to pollute your actual element with conditionals and still get full binding functionality.
I'm working on a more feature-complete solution. If you're interested I could move it to a separate repository and publish.

AngularJS losing two way binding after JS form plugin rendering

I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.

AngularJs and jQuery UI, how to ensure no UI code in controller

I am using AngularJS as the framework for building a web app. The DI is good for unit testing and AnguarJS also has a best practice that not have DOM UI related code in controller. I am also using jQuery UI for building UI. Then I have a problem:
For example I am using jQuery UI dialog http://jqueryui.com/dialog/#modal-confirmation, so in the HTML I have the code for declaring the dialog:
<div id="dialog-confirm" title="Empty the recycle bin?">
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Then I have a button by clicking on it the dialog will pop up
<a ng-click="showDialog()>Click me</a>
Then in the controller I have the code
$scope.showDialog = function() {
$('#dialog-confirm').dialog( //DOM UI code in controller!
//...
});
}
This is the basic workflow by following jQuery UI demo code: http://jqueryui.com/dialog/#modal-confirmation and I just combined it with AngularJS. It works, but I think there is a big problem in my code: I mixed DOM UI code and logic in my controller thus it breaks the test-ability of the controller.
What should I do to use jQueryUI with AngularJS without breaking DI principle and test-ability?
That's not as easy as it may seem. Angular has so called directives that are used to encapsulate DOM code, but writing directives isn't exactly trivial - it can be tough to get it right.
Your best bet it to use angular-ui which implements similar functionality using bootstrap and pure angularjs (no jquery / jquery ui dependency). It doesn't try to replicate jQuery UI though, but bootstrap's JS functionality, so that's not a drop-in-replacement. I'd suggest you try finding a pure angularjs solution first, if possible.
If you have to use jQueryUI, you can write custom directives that delegate the actual work to jQuery UI. Here's a datepicker example, and there are more examples scattered around the net. The directive keyword will help in googling.
If you really want to delve into the depths of writing angular directives, the source code of angular-ui is very instructive, but it requires an in-depth understanding of scopes, scope inheritance, data binding and angular's compilation process.

angularjs - After changing views using routing the jquery elements doesn`t get rendered

My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.

Implementing interactive popover / callouts in angular

We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.
The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.
Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.
Is there something that can accomplish this? Or do you have any tips?
I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.
<div class="check-thing">
<button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
<modal ng-show="showModal" model="modal-model"></modal>
</div>
Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.
Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.
Have you looked at the AngularUI Bootstrap modals? (http://angular-ui.github.io/bootstrap/#/modal) They fit very well into AngularJS and can really be styled into almost any appearance you want. Passing data in and getting data out is very easy. Most UX people don't seem to understand how the web works (mine doesn't seem to anyway) and these have been a real savior for me and my team.
I know this is an older post but since an answer was never selected I would like to point out a possible solution that I had come across recently.
The Angular UI BS Popover allows you to have it align with the element you are targeting, which can be click, hoover, and focus.
For content you have the choice between text, HTML formatted string and template. Based on the question, the template is likely the one that would be used to allow the content to be dynamic and include interaction.
You can find more information and a demo on how it works at: https://angular-ui.github.io/bootstrap/

Categories

Resources