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();
Related
I know this goes against knockout but I've gotten to a point where I'd like to create a control and bind an observable to it. I'll know the field in which it will be bound to but not the model. I'm wondering if there is a way to find which observable is bound to the text or value of an element? I have a complex view model and the class that the observable could be bound to could be 3 layers deep. I can get the context back by using:
ko.contextFor(this)
but that brings back the entire model, I'd like to just get back the observable. Any suggestions?
I got it figured out! For some reason the issue was because I was using a hidden field. I changed the field to a text box and made it invisible and all started working.
In a (webforms) page I have a button that opens a jqueryui dialogue which is loaded dynamically.
The problem is that I want this dialogue to be master of its own knockout view model but the view model is already set in the main page.
I suppose it is not possible to add new properties to the view model after ko.applyBindings is called.
Instead I should be looking into another design. But which?
Applying bindings to different parts of the DOM would require me to some big redesigns I hope to avoid right now.
Having all the dialoge bindings as a list of key-values is possible but not very elegant IMHO. The main page would then only have to add a vm.dialogueKeyvalueCollection.
My present, possible, solution is to have the main form add the dialogue's properties vm.dialogue.userName() vm.dialogue.searchResult() but then my html controls won't bind as they are created after applyBindings is called. The present solution for this is to call ApplyBindings again like so: ko.applyBindings(vm, $('#dialog-form')[0]); for the added HTML. I was in the belief (and still somewhat am) that to call applyBindings for different DOM elements one must not be nested inside another. Binding to dynamic HTML is commented here and jsfiddled here.
?
I do a lot of composition with nested view models, often for the purpose of creating dialogues modals. See here for a full-fledged answer.
It might be simpler to try and get away with just using the with binding, though. You could create a dialogueViewmodel observable property on your viewmodel.
Just fill it with one or more observable keys when you're ready to show the dialogue, such as
this.dialogueViewmodel({
markup: ko.observable("<h1>Kittens!</h1>")
});
and wrap it in a with binding:
<!-- ko with: dialogueViewmodel -->
<div id="dialog" title="Basic dialog" data-bind="html: markup">
</div>
<!-- /ko -->
As long as dialogueViewmodel is null, nothing gets bound and rendered. This only happens when you add your dialogue data - no need to fiddle with applyBindings again.
You will probably have to write your own binding to interface with jQueryUI.dialogue, though.
Third option: I have written a modal library that comes with a Knockout binding out of the box. Here's a JSfiddle demo. If you're not set on jQueryUI, that might be an alternative; while the documentation is not perfect, I'd be happy to help you any way I can and fix the docs along the way.
Can you ko.applyBindingsToNode function to bind the appended html.
ko.applyBindingsToNode(appendedelement,{ binding options})
Hope this will help you.
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
Ok getting frustrated on this one.... Using knockoutJS to do some visual interaction stuff.
What I have is a button that is going to make an AJAX call to validate some data. That call sends back a CanProceed property as well as an object that represents other view settings. The code works when I set CanProceed(true) this turns on a DIV that has more DIVs inside it, each of those visibility properties are bound to a Permissions.AllowXXX that is set from the server.
See the fiddle for an example
http://jsfiddle.net/RcCAx/
What I want to have happen is when I get the Permissions from the server I should be able to tell knockout about the object and have the page UI update but its not working. If I declare the observable first (like with the CanProceed property) it works, but if I try and use the ko.mapping.fromJS(serverdataobject) here its not updating stuff that was bound to it earlier.
Help......
See updated fiddle for a solution. The key here is to have Permissions be an observable
I am trying to write my own Dojo/Dijit Editor Plugin. the only Information i found on the topic is this forum post recommending to use the print plugin as a pattern.
So i did build my own plugin, copying the print plugin and not changing anything apart from the name.
Then i included the plugin to an editor instance.
But instead of getting the print buttons functionality and the print button, i get a button with classes "dijitButtonDisabled dijitDisabled" and no functionality.
The Print button does work though.
Anyone any idea why that is?
In JavaScript events are often hooked onto individual objects, which are referenced by things like id, classes, and other parameters. For this to work you need both the selector and the original element to match.
It sounds like you updated some parts of the code (by changing the names) but did not update the corresponding actions. I'd start by looking for any remaining events bound to the previous names (in jQuery, look for bind() or live()) and changing those selectors to the new names if you find them.