How do I create cascading/dynamic select lists with backbone - javascript

I am attempting to create a reusable backbone view that represents a select element, and supports the following:
Setting a selected value from a model
Binding other select views to it, so that when its value changes, other select views update their collections
I've seen a few different resources on this, such as
http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
http://railsindirection.blogspot.com/2011/08/backbonejs-and-dependent-selects.html
However neither of them seems to support a generalized object that fulfills both purposes - they seem to be hackish.
Does anyone have any advice on how to go about creating this? Or maybe a link to someone else's code that solves this problem elegantly?
Thanks

I would recommend you to implement event aggreator this way.
http://lostechies.com/derickbailey/category/backbone-eventbinder/
so you bind the change event on your select list inside the first view to a method that triggres the update in the other views.
Hope this helps

Related

How to use angular two binding for dynamically created Kendo Grid?

Actually i am creating the whole grid dynamically. In that i need to achieve two way binding using angularjs.
I have looked many examples unable to find releted my requirement.
Here i am attaching one example for two binding concept. but this not my real requrement code. that is very difficult to create dojo. So i attached this Dojo Link.
In this link when ever updating existing data it's updating to the Kendo datasource as well as $scope value. but if i add any new record then it's updating only kendo datasource not updating the $scope. Please give me the solution for this based on this i think i can able to achieve my requirement.
Thanks in advance...
http://dojo.telerik.com/aTIba/8
I achived two way binding for this.http://dojo.telerik.com/aTIba/9

Select2 dropdown menu persists after select removed from DOM

I am using select2 version 4.0.2(rc1)
What I am seeing is that when using select2 with isMultple=true, opening the dropdown and then dynamically removing the select from the DOM, the menu sticks around.
You can see it happening in the select2 examples by focusing on control so you see the time zone options, then in the console typing $('.s2-example').remove(). The list of options sticks around.
Edit: Above is an example of what I am trying to work around. What is happening in my case is the dom is being manipulated to remove the select box by a framework in such a way that I can't hook into it before it happens. What I am trying to do is find a way to respond to the element being removed in the hopes that I can manually remove the options list if it exists.
I'm trying to figure out a clean approach to handling this. I've tried hooking into destroy like so:
$("#select-2-id").on("destroy", function(){...})
but destroy doesn't appear to be fired.
I have considered using a mutation observer but that feels kind of hacky to me. Could anyone suggest a better way to handle this? Any advice would be appreciated. Thanks!
Definitely buried in the documentation (under adapters), but you should be calling the destroy method on the select by passing "destroy" to the jQuery object's .select2() method
$(".js-example-basic-multiple").select2('destroy');
This destroys the instance. You can then safely call .remove()
$(".js-example-basic-multiple").select2('destroy').remove();

AngularJS : directives newbie

I'm starting my great adventure with angular and wanted to ask a question regarding directives usage, as I am not 100% sure after seeing multiple tutorials.
I want to make a simple app giving you directions:
1) click a button, fire in the controller a function to get current position from navigator geolocation (i think no service is necessary for this, and this can stay in the controller?)
2) after getting the coordinates I have some information about the place, which should be shown to the user, and here is the question: Should there be a directive with template for binding these information from the scope and showing in the dom, or is it enough to use simply "ng-hide" (which is in fact a directive - sic!:)) on a div, fetch the information on a place with a service, bind it with the hidden div, and set "ng-hide" to false to display the dom containing place information.
The "ng-hide" variant seems easy, but is it the proper "angular way" or just bad practice of beginners?
Thank You for your time and help in advance:)
IMHO
You can put it in a service if you want to use that method from different controllers or for clean-code purpose.
I use directives when I want a specific behaviour or a group of controls that repeat along the application. If you are using basic html controls and you just need to display/hide I would use ng-hide.

Kendo UI: Get TextBox Value on Button Click

I am having a form, which comprises of several textboxes and one button.
I am using the Kendo UI MVVM format. How shall I get the value of each textbox and store it in an object on click of the button?
Will I have to use normal jQuery in order to get the values or is there some other way of getting the values from each of them?
Thanks
Hardik
Please take a look at these documentation pages:
http://demos.kendoui.com/web/mvvm/index.html
http://docs.kendoui.com/getting-started/framework/mvvm/observableobject
http://docs.kendoui.com/tutorials/mvvm-in-kendo-ui
These pages contain answers to most of the questions you'll have concerning Kendo UI MVVM. It would be silly and presumptuous of me to think that I could explain it better than the qualified and hard working individuals at Telerik that have so painstakingly compiled these documentation pages.
The gist of it is that you need to create an instance of the kendo.data.ObservableObject that has properties for the values you are working with. This is your view-model. Then in your markup for your text boxes, include values for the data-bind attribute that reference the properties in your observable object. Create a function in your view-model to handle the button's click event. Put a data-bind attribute in your button that binds the click event to your function. Finally, call kendo.bind(<element>, <observable object>), and that will connect the wires from your markup to your view-model object.
In your click event-handler, you can take the values of the view-model, and insert them into the object you need. You should not need to use "normal jQuery" for anything besides referencing the element to call bind on.
Quickly you can retrieve the value this way using JQuery:
$('#yourTextBoxID').data('kendoMaskedTextBox').value();
you can use this code:
$('#yourTextBoxID').val();

knockoutjs - object's changeTracker/dirtyFlag triggering immediattly

I recently found and applied the changeTracker/dirtyFlag approach successfully in my code and everything was good. Very neat and useful. Though, today, I was trying to use it again and something weird was happening: the somethingHasChanged trigger was firing as soon as I opened the page.
I looked, searched and nothing. I was not doing any change to the observables after setting the tracker.
After a couple of hours of this, I found the root of the problem:
One of the observables is binded to a <select> element thus setting the currently selected <option>.
If I remove this binding, it no long triggers.
I don't know why this happens, since the value is only read (supposedly).
Any thoughts on this?
My guess would be that you are binding against numeric values and the selected one is being written back to your view model as a string, as KO reads it out of the DOM element.

Categories