Marionette regions and layout - marionette

I have following code to put a view inside a region.
Layout.rightPanel.show(new changePasswordView());
How do I close this view as I don't have access to id?
Also it creates an empty div while rendering view. Is it possible to avoid this?

Simply call the close method:
Layout.rightPanel.close();
The only way to avoid having an extra div is to declare an enclosing tag with the tagName attribute in your view. For example, having tagName: "p" in your view will make your view get rendered within a "p" tag instead of a "div".

Related

Get cursor position in CKEditor 4 within edited element's HTML

I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.
I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)
I tried to get range and extend it to the start of editable element:
var range = editor.getSelection().getRanges()[ 0 ];
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );
Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.
You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.
Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.
See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.

Marionette Layout object to render tab content

I have a region in which I need to have a tabbed view (simple) however if I want the tab content to be differently layout - not sure how to achieve it. I can create different layout with multiple region and corresponding view, but how do I attach this to tab content, given that applyout can only be attached to region? Or can this be attached to one of the div of tab-content using $el?? Need some pointers.
Not sure I entirely understand your question.. But here goes.
I have implemented a navigation component where I can pass a tabsCollection and region. It will set up a region for the content and a list of tabs above it. When a tab is clicked it will fire the callback on the model in the tabsCollection which can be used to display what ever content you want.
There are more complex ways to handle this to allow for caching of a tabs content. But basically using a Backbone collection for the tabs with their own function for displaying content will do the trick.

How to change DIV content in a different page?

I know there is ways to change DIV content within a single page. Using Ajax for example to dynamically get div content from an external .html file and then replace Div content using load or get functions.
However, is there a way to do this on a different page?
For example, say there is 2 pages. One.html, and Two.html.
I want a button on the first page (One.html), that when clicked, will change DIV content (by default the div box is empty, I want the button to insert text into the box basically) for a specific DIV Id on page 2 (Two.html).
So the process is basically: Click button on One.html, some function gets div content from external html (Three.html for example), and the uses that content to update an empty div on Two.html. Also, I would like to load some basic CSS in a similar fashion. Not only insert text into the box, but also change the background color and text color.
Thank You!
You just store the info and send it to the next page, say, with the HTTP request and submit methods get and post.
http://www.w3schools.com/tags/ref_httpmethods.asp

Mvc base viewmodel render data within layout

I have created a base viewmodel that all of my view models inherit from. That part is easy.
All views are bound to a viewmodel (all are inherited from the base view model)
Within the OnActionExecuted method I insert a true/false value onto a property within the baseviewmodel depending on some conditions.
From the view side of things. I have a single layout page that some how I want to be able to read the property's value and render a different partial view based on the value.
Is this possible? I dont want to have to add the code to each of the views but I don't think I should be binding the layout to my baseviewmodel either.
If I can stay away from inserting the value into the valuebag that would be great as I need to be able to access these values anywhere in the application via strongly typed names.
what you want probably isnt possible because as you call a view from the controller then first the code inside that view is executed and then the layouts code is executed
to achieve what you are doing you can do 2 things
1. make the logic inside the controller itself and then render the correct view
2.call the layout from the controller giving it the name of the partial view in some property of the model or in the viewbag
Not sure I quite follow the use case, but rather than trying to render out a partial view, have you thought about nesting your layout pages.
I think you should be able to override the layout in the onactionexecuted, so you can set the layout dependant on the bool and that layout will render only the correct option.
Look here for an example:
Nested layout pages with Razor
HTH
Si

MVC3 show appropriate partial view based on selected item

So i have View1 and in there I have:
<ul>
<li><a>First item</a></li>
<li><a>Second Item</a></li>
</ul>
//Some Partial View Placeholder
When a user click on First Item, I want the Partial View Placeholder to Load a FirstView, and when user clicks on Second Item, I want the Partial View to load a SecondView.
Each of Partial View's need save information in View1's model info.
How is best way to do this?
You could either load both partials into two divs on the page and use javascript to hook into any clicks on first and second item, and to change visibility of the relevant div.
Or if you don't want both partials loaded on the page at the same time, you could make your placeholder an empty div and use something like jQuery.Ajax. When first or second item is clicked, make an asynchronous call to the relevant partial view and inject the returned html directly into the div placeholder.

Resources