Javascript Variables in MVC Partial Views - javascript

This might be quite simple but I am having difficulties with it. I have a view where I am setting a javascript variable, within that view I display a partial view using RenderPartial like so:
#{Html.RenderPartial("MyPartialView");}
I need access to a js variable set in my View, in my PartialView. Is this possible? I know there are several other ways to pass data using models but for my unique scenario it would be very helpful if I could do it this way as I am already passing a model so I can't do it that way.

Why wouldn't you pass your model into your partial view ?
anyway you can add your property to window object and use it in your partial view.
UPDATE:
What I meant was to open script tag in your view as follows :
<script>
window.test = "test value";
</script>
and use it in your partial view as follows :
<script>
alert( window.test);
</script>
BTW you can pass additional info to you partial view . Html.Partial accepts a third parameter which is viewData dictionary .
#Html.Partial("PartialViewName", yourModel, new ViewDataDictionary(){ {"AdditionalModel", value} })
and you can access it in your partial view by its name :
ViewData["AdditionalModel"]
sorry for the late response

Related

Setting Property of View Model to Knockout Value

Using MVC 4, I am trying to send a viewmodel back to the controller with a value that was populated using Knockout in the javascript part section of my view.
Psuedocode:
var ProgramOptionsVm = function() {
self = this;
self.AvailableOptions is populated (IList<RegistrationOption>)
}
I want to set AvailableOptions equal to field of viewmodel. Something like:
Model.AvailableOptions = ProgramOptionsVm.AvailableOptions
Any advice would be great!
You can't set Model.AvailableOptions directly with your Knockout view model. The two things exist in different scopes: the former is server-side, while the latter is client-side. You would have to POST the data back to another controller action.

Passing object available in the template into the {{render}} helper doesn't seem to work

I have an object defined globally as App.configObj which contains a property data. Inside a view's template I can use {{App.configObj.data}} to display the value and it works fine.
Inside that same template, I use {{render "viewC" model config=App.configObj}} to render a similar view, but the config property on that view remains null on didInsertElement. Other arguments set to primitive values are correctly set at that point.
Since App.configObj is definitely available in that context, shouldn't I be able to pass it into that view?
Here is the jsbin that illustrates the situation: http://emberjs.jsbin.com/misiyaki/12/edit
If you comment out the render call for ViewC, you can see that {{App.configObj.data}} renders just fine in the template.
My goal is to use an object encapsulating several properties to configure the view, so I need to be able to pass that object in. I spent a lot of time searching for similar content online but didn't find anyone trying this.
What am I missing?
Thanks!
I understand your struggle here with not being able to pass in a property in your render code... but in this case it doesn't seem that that is truly necessary.
Here is a fiddle with some changes to show you another way, that is essentially the same thing if i understood your intentions correctly. http://emberjs.jsbin.com/misiyaki/15/edit
The new code for your view:
App.ViewCView = Em.View.extend({
name: 'testName',
config: function () {
return App.configObj;
}.property(),
data: function () {
return this.get('config.data')
}.property('config'),
templateName: 'view-c'
});
Hope this helps!

Ember js: How to retrieve the underlying model from a controller

I am trying to retrieve the underlying model object from a controller so that it can be persisted (I am not using ember-data). The obvious way would simply be:
controller.get('content');
But this doesn't work. The problem can be summed up as follows:
controller.set("content", model);
sets the content as expected and at this point
controller.get('content');
works as expected. But if I then decorate the controller with other properties eg.
controller.set('IamNotPartOfTheModel', false);
then suddenly the 'content' includes this new property. I would've expected the content to remain unchanged and the new property to only be applied to the controller itself. I understand the controller is a proxy for the model so for the most part they are treated as one and the same but surely they should still be separable when needed? The whole point of this pattern is to separate data that should be stored from data that is just temporary. Am I missing something?
To have your display specific properties out of the model, just specify them explicitly in the controller... Otherwise the controller acts as a proxy for its model... just have the property "iamNotPartOfTheModel" in your controller
App.IndexController = Ember.ObjectController.extend({
iamNotPartOfTheModel: null
})
Sample fiddle here
Your controller needs to interface to some kind of model. You can't separate the persisted model from the controller except by some kind of object reference. Even if you don't use ember-data, you'll still need to create objects which then plug into the content of the controller. Have a look at Evil Trout's blog for an implementation of ember without ember-data. Its a great starting point.

Ember.js: how to add parameters to a View

I guess this is simple but as an Ember newbie I cannot find a solution...
So let's say I have this very simple view:
MyApp.MyTextView = Ember.View.extend({
template: Ember.Handlebars.compile('{{value}}')
});
And I want to use this view in order to display two different properties of the same object. This sounds like I want to add parameters when I 'call' my view.
In a second view I want to be able to do something like the following (supposing my content object is a Person : {firstName: 'toto', lasName: 'titi'}):
MyApp.AnotherView = Ember.View.extend({
template: Ember.Handlebars.compile('FirstName: {{view MyApp.MyTextView value="content.firstName"}} - LastName: {{view MyApp.MyTextView value="content.lastName"}}')
});
I also tried to use Handlebars helpers as explained here, but It does not work (when I use {{highlight firstName}} or {{highlight content.firstName}} what is displayed is firstName or content.firstName, not the property value...)
Do you guys have any idea? I'm stuck here...
Thanks!
To pass in parameters to your view, you can specify each one like so:
{{view App.MyView firstNameBinding="content.firstName" lastNameBinding="content.lastName"}}
Which would allow you to do:
template: Ember.Handlebars.compile('{{view.firstName view.lastName}}');
However, you can imagine that this will get very long as you add more properties. Therefore you can instead simply pass in your content object as the context (but you don't need to pass it in as context -- although that's for another day):
{{view App.MyView contextBinding="content"}}
(Please note that contextBinding is special, and changes the context in the view.)
That way the view will hold the object you pass in, and so in your view you can now do:
template: Ember.Handlebars.compile('{{firstName lastName}}');
(You can do it like this because content is now your view's context.)
I've knocked you up a quick JSFiddle to elucidate (hopefully!): http://jsfiddle.net/YVCrq/

Populate knockoutJS view model object based on an initial markup from the server

My web server returns a page with some structured markup. I need to use knockoutJS to have a markup representation at hand as a JSON object - knockout view model object.
The page basically has (right after initial loading) a <div data-bind="foreach: ExistingNamings"> that has several enclosed divs that actually hold stuff that supposed to go into the ExistingNamings array on the view model object.
Can knockout "parse" and existing markup and populate view model based on the markup provided at the moment of calling ko.applyBindings?
A tutorial on KNJS shows the opposite - we have a data generation code in JS, and that gets pushed into an html upon applyBindings call.
P.S. My server side is ASP.NET MVC, and I've seen people suggesting http://knockoutmvc.com/ - an approach to generate initialization code for js file. This way it is "as if" view model is initialized via javascript. Is this the only way of dealing with initial data, or I indeed can parse markup?
You can directly serialize your C# models into JSON using razor like this:
var serverModel = #Html.Raw(Json.Encode(Model));
or, obviously:
var serverProperty = #Html.Raw(Json.Encode(Model.Property));
The only time this fails is when you have circular references, which can happen if you are dropping your Entity models directly in. If you are doing this, make a ViewModel for them, to eliminate the circular navigation properties.
Update:
To get this into your viewModel, add this to the bottom of your Razor View:
<script type="text/javascript">
var serverModel = #Html.Raw(Json.Encode(Model));
//Define KO viewModel, either here, or by including via script tag in header
ko.applyBinding(new ViewModel(serverModel));
</script>

Categories

Resources