Knockout two-way binding getting lost - binding

I have an observable collection that is populated from a service. The UI is constructred using containerless ko tags. I have input boxes which are being bound correctly, but two-way binding is not updating the VM.
I have a reproduced my problem in http://jsfiddle.net/cooper/EHNct/18/
Where am I going wrong?

Your mistake is in your value binding of your inputs. By using the function call volume() you explicitely unwrap the value contained in your observable so that wat is put in your input become static.
Use the simple volume definition in your data binding and everything will works fine.

Related

How to bind from DataTemplate to Page's DataContext?

I've got a page where a DataTemplate is being used to bind to the model for that content, e.g.:
<DataTemplate x:DataType="models:MyDataType">
... content ...
</DataTemplate>
In that content, I need to be able to bind a Click event. I need that click event to exist in the view model that is set as the page's DataContext:
<Page.DataContext>
<vm:MyViewModel x:Name="ViewModel">
</Page.DataContext>
but I'm really struggling with getting it to compile. Every approach I try results in the compilation error "Object reference not set to an instance of an object".
I know I can't use x:Bind because that will bind to the DataTemplate's DataContext, so I've been trying to use Binding and, based on other SO answers I've read, it seems like the answer should be:
Click="{Binding DataContext.Button_Click, ElementName=Page}"
where Page is defined as the x:Name for the Page. I've tried removing DataContext. I've tried adding ViewModel.
What am I misunderstanding? Is it not possible to do what I want to do? I've tried using code-behind instead but I'm using Template 10 and that pushes almost everything onto the view model, which makes it harder for me to access things like the navigation service from code-behind.
tl;dr; use Messaging.
#justinXL is right, 'ElementName' can work. But is it best?
The problem you are trying to solve has already been solved with messaging. Most MVVM implementations include a messaging solution. Prism uses PubSubEvents; MVVM Light has its own messenger. There are others, too.
The idea is that an outside class, typically described as a message aggregator, is responsible for statelessly receiving and multicasting messages. This means you need to have a reference to the aggregator but not a reference to the sender. It’s beautiful.
For example
A common use case might be a mail client and how the data template of a message in the list would include a trash/delete button. When you click that button, what should be called? With messaging, you handle the button_press in the model and send/publish a message (one that passes the item).
The hosting view-model has subscribed to the aggregator and is listening for a specific message, the Delete message that we just sent. Upon receipt, it removes it from the list and begins the process to delete it from cache/database, or whatever – including prompting the user with “Are you sure?”
This means all your data binding in your data template is local, and does NOT extend outside its local scope. Why does this matter? Because if you use Element Binding to reach the hosting page, it means you cannot 1) move this template to a resource dictionary or 2) reuse this template.
There are two other reasons.
you cannot use compiled x:Bind to do this because it already limits use of this painful binding approach – this matters because a data template is typically in a list, and performance should always be prioritized, and
It adds considerable complexity.
Complexity?
I am a big fan of sophisticated solutions. I think they are rare and are the trademark of truly smart developers. I love looking at such code/solutions. Complex is not the same as sophisticated. When it comes to complexity, I am not a fan. Data binding is already difficult to wrap your head around; multi-sourcing your data binding across scope boundaries is pure complexity.
That’s what I think.
Your binding expression is correct, except it won't work with a Button_Click event handler. You will need an ICommand defined in your page's ViewModel.
Since you are using Template10, you should be able to create a DelegateCommand called ClickCommand like this
private DelegateCommand<MyDataType> _clickCommand;
public DelegateCommand<MyDataType> ClickCommand
{
get
{
_clickCommand = _clickCommand ?? new DelegateCommand<<MyDataType>>((model) =>
{
// put your logic here.
});
return _clickCommand;
}
}
And the binding will be updated to
<Button Command="{Binding DataContext.ClickCommand, ElementName=Page}" CommandParameter="{x:Bind}" />
Note I have also added a CommandParameter binding to the button as you might want to know which MyDataType instance is associated with the clicked button.

Does #Html.Editfor use data bind

I want to know if #Html.Editfor use databind. In http://msdn.microsoft.com/en-us/library/system.web.mvc.html.editorextensions.editorfor(v=vs.118).aspx
They say that it use a for each method, but one of my colleague makes me doubt by saying that this is databind.
They have mentioned on their page
Returns an HTML input element for each property in the object that is
represented by the .....
Here they are saying that #Html.EditFor is available for each property of the model. Its not same as its using foreach. This is indeed data binding.

SqlDataSource not populating controls until after page_load

bit new to asp.net so bear with me. I have a dropdown that is being populated from a SqlDataSource. This dropdown's selected value is used as a parameter in another SqlDataSource for my results grid.
Problem is my dropdown is not being populated with anything until after page_load. This is causing an issue because I'm calling a method that uses the dependent SqlDataSource in the page_load, and it blows up because one of its parameters is null.
I've tried the page_prerender as well, and the drop down is still not populated by then. Any ideas on what method in the life cycle I can use, or a way to populate the SqlDataSource controls earlier?

Knockoutjs native template binding and simple array of strings

I'm trying to understand native knockoutjs template binding, especially foreach binding.
Just wondering how to access current item using native bidning? With jQuery.tmpl it is possible using something like $item / $data. How to do the same using native template binding when data source is the arrays of primitives so each item has no named fields? Here is the JSFiddle with two examples, the first - using native binding where data source is array of custom objects, second one - binding to an array of strings. I'm unable get it working, looks like I'm missing something obvious?
Basically I'm trying to understand native bindings and be able refactor following example using native binding: JSFiddle: Comma separated list of checked items so I would be able keep an observable variable which represnts a comma separated list of checked items.
You can use $data to access the raw value like: http://jsfiddle.net/rniemeyer/M73S8/3/.
Here is the other fiddle updated: http://jsfiddle.net/rniemeyer/EGAH9/8/. Not sure the exact functionality that you want to support in it.
I am not sure if this is already answered from the amazing Niemeyer (thanks for all of your help in the Knockout Community!), but I made a jsFiddle to show storing the actual Person objects Selected in an observable array.
I am not sure if that is what you are trying to do, but maybe someone else is researching this looking on how to do this exact thing: bind the actual objects into an observable array, not just the ids (although, i added that too to remind me).
Example of a Checkbox List Selected Object Binding: http://jsfiddle.net/cjgaudin/Dp7Br/

Binding to multple datasources in Silverlight with String.Format

I am trying to bind a label 2 (or more!) fields in a dataset in Silverlight 4. I get a localized string out of a resource file and do a String.Format on it like so:
<TextBlock Name="lblTotals" Text="{Binding TotalItems, StringFormat='You need \{0\} items and \{1\} products.'}" />
This works fine with 1 item but there's no way of doing multiple binds in SL4 it seems.
I found some blog posts on how to bind a single element to multiple fields but it does not seem to support the String.Format part which is critical.
The last caveat is that it is bound to an ObservableCollection, so when these fields change in the data the UI must update too.
Any suggestions? Thanks!
I found a solution here using a converter and binding to the whole object and passing in the string as a converter param.
Then the totals did not update when the grid values updated (despite being linked to OnPropertyChanged) - this was the solution hack here.

Resources