Additional options for MarionetteJS CollectionView - marionette

I have no idea what am I missing here but I'm not able to pass additional parameter to a CollectionView, like so:
View definition is very basic:
class UI.Elements extends App.Views.CollectionView
itemView: UI.Element
And then instantiated with these options:
getUIsView: (uiobjects, itemView) ->
options =
collection: uiobjects
variationView: itemView
new App.VariationsApp.UI.Elements options
With this code the view is being created fine, except the variationView is no where to be found. From backbone documentation:
When creating a new View, the options you pass — after being merged into any default options already present on the view — are attached to the view as this.options for future reference
But my CollectionView doesn't have options property on itself.
Really, I don't have any idea what am I doing wrong. Any help would be greatly appreciated because I'm stuck.

Any parameter you provide your view that aren't recognized as Backbone/Marionette options will be attached to this.options within the view. So you should have access to the variationView by accessing this.options.variationView.
If you need to access that information in the template, you need to pass it along by writing a serializeData function.
You can see an example of this in practice here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/common/views.js

Related

Where did ViewLocationExpanderContext.IsPartial go?

In Core MVC if you want the razor view engine to look for views in places other than the default locations then a new ViewLocationExpander can be added in the ConfigureServices method in the startup.cs like so
services.Configure<RazorViewEngineOptions>(options => {
options.ViewLocationExpanders.Add(new ViewLocationExpander());
});
Where the ViewLocationExpander class implements IViewLocationExpander. That class typically has access to the ViewLocationExpanderContext, and in RC1 that context contained an IsPartial property. This property was useful if the location expander wanted to specify different view locations for partial views than regular views.
I see that in RC2 this IsPartial property is gone. However, I do see that there is a IsMainPage property but I can't find any documentation on it.
Does anyone know if the property basically just the inverse of the old IsPartial property?
Yes, the IsMainPage property is as you've said - the inverse of IsPartial. As Pranav has pointed out in the comments, you can see the commit and reasoning for the change here.
Glad to see I'm not the only one that was caught out by this change!

In "Prism 6" how to bind viewmodel to model

Please explain to me how to use this method:
AutoWireViewModelChanged(object view, Action<object, object> setDataContextCallback)
What is the best way to bind view and viewmodel?
You don't need to call that method from code to bind view and viewmodel. You simply add this line to the xaml of your view and the binding will happen automatically. If you want to read deeper into this topic, check this paragraph in the official documentation.
ViewModelLocator.AutoWireViewModel="true"
You can check this sample on the Prism GitHub repository to see a working example.

EmberJS: programmatically adding a child view to a collection view without changing underlying content

My EmberJS app is confusing me a lot at the moment. I have a collection view, that in turn defines an itemViewClass of a custom view I have defined in my code. Something like:
App.CarouselView = Ember.CollectionView.extend({
itemViewClass: App.SlideView.extend(),
});
And this CarouselView is rendered inside a template that has a dynamic segment backing it (I hope this makes sense?) . The controller for these dynamic segment is an array controller because the model for these dynamic segments is a collection :) (more confusion, please let me know)
App.SlidesController = Ember.ArrayController.extend();
By now all of you have figured that I am basically rendering a bunch of slides inside of a carousel. And these are dynamically backed in the collectionView by setting the property
contentBinding:'controller' // property set in CarouselView, controller corresponds to SlidesController
The confusion begins now. I want to add a slide to the existing set of slides. So I provide a button with an action : 'add' target='view'
In the SlidesView,
actions:{
add: function(){
var carouselView = this.get('childViews')[0];
// SlidesView has carouselView and another view as it's child, hence this.get('childViews')[0] is carouselView
var newCard = carouselView.createChildView(App.SlideView.extend());
carouselView.get('childViews').pushObject(newCard);
}
}
The above piece of code sucks and hurts me bad. I want to basically add a new SlideView to my CarouselView collection programmatically upon a button trigger. But apparently Ember recommends that childViews should not be manipulated directly and I ought to instead change the underlying content.
It states in my console.log that manipulating childViews is deprecated etc.
So essentially I need to add something to my content to my SlidesController content ? However, I don't want to add something to the content, this is just a soft add, that is providing the user with a slide so that he may choose to edit or add something if he wants to. He can always discard it. A hard add that will require me to persist the new slide to the DB will come once the user decides to save this information.

How to alter a DataTemplate based on a property on the page ViewModel in Windows Phone 7?

I have a ViewModel which contains a Boolean property which tells you if the user has authenticated or not.
I have a WrapPanel which is bound to a collection of profiles. The DataTemplate for these profiles has an icon - a closed padlock for when the user is not authenticated and an open one for when the user is authenticated. Ideally these would be bound to the Boolean on the ViewModel but the DataContext for the templates is the individual profile objects.
I have tried,
Setting the Source selector in the binding as specified here although it appear Windows Phone 7 does not support x:Reference
I tried also the Inversion of Control(?) method detailed here (but containerLocator was not found on my object)
I tried applying a Style.Trigger but these are not supported in Windows Phone 7
I also tried accessing the XAML elements in the code behind and updating programmatically on event triggers, however I could not get a handle on the Image element inside the DataTemplate
Edit after comment: WP7 does not support style triggers. But if anyone is looking for this answer on following versions I let the reply below:
I would use a Style Trigger as seen here to update the icon Source property on the fly - as part of the style of your DataTemplate so you would get a hold of your Image.
One way I found that works based on an answer by Damian Antonowicz but does not implement the full inversion of control method that he uses, is as follows,
Create a partial class which resolves to your view-model instance under your view-model namespace, e.g.
public partial class ViewModelInstanceLocator
{
public AppViewModel AppViewModel // Or whatever the type of your view-model is ...
{
get
{
return App.VM; // Or wherever your view model instance is ...
}
}
}
Define the other half of the class in your XAML page as a resource so that it can be referred to as a static resource, I did this in my App.xaml so that it could be referred to everywhere,
<ResourceDictionary>
<viewmodel:ViewModelInstanceLocator x:Key="ViewModelInstanceLocator" />
...
</ResourceDictionary>
You may need to include the relevant namespace if there is not already a reference to your view-model namespace e.g. at the top,
xmlns:viewmodel="clr-namespace:MyAppNamespace.ViewModel"
Finally to bind to the view-model as follows,
{Binding AppViewModel.SomeProperty, Source={StaticResource ViewModelInstanceLocator}}
The binding updates as usual just as if the view-model instance had been referred to through the DataContext. However, it does not work with design-time data.

Marionette children.findByIndex(x) in a compositeView?

fairly new to javascript and backbone Marionette, and I cant seem to figure out how to do this.
I want to select a child view from a compositeView by index (or any of the other selectors the docs say are available for the inherited collectionview (from babysitter).).
ie from within myCompositeView:
someMethod: function(index){
this.children.findByIndex(index);
},
...
how can I access the collectionView from a compositeView such that I can findByIndex or findByModel etc and get a reference to the actual Marionette View?
thanks.
Make sure you're using v1.0.0-beta6 of Marionette, as this is where the feature you need was introduced.
CompositeView extends directly from CollectionView, so calling this.children.findByIndex should work, as long as you're using the right version of Marionette.

Resources