First of all, sorry to ask a question that has been asked in similar ways before. I just can;t get any of the solutions to work for me.
I am using handlebars.js with the express-handlebars library in node.js. I have both server and client rendering set up correctly and can render partials with data passed in through routers with no problem.
However I am struggling to access the page context and render javascript data declared in a script in the page.
Page snippet:
<script type="application/javascript">var hash = {
var1:'this is the data I want to render',
var2: 'this is some more data i want to render'}</script>
<div id="thisdiv">
{{> blag this.hash}}
</div>
Partial 'blag':
<div class="blag-partial">
{{this.var1}}
{{this.var1}}
</div>
I cannot get the value var1 in my hash variable to render.
If i pass a hard coded string to the partial then it works with no problem, but I can never seem to access what i would call 'page context'.
What am I doing wrong that I can never seem to get this to work?
I have tried...
Passing 'this' as the context into the partial
Using the '../variablename' syntax to pass it into the partial
Send key value pairs into the partial
Accessing variable from context using the # symbol in both the partial call and inside the partial itself
...and many other combinations of these things. With 100% failed attempts except when I pass in a hard-coded string.
Any help would be really appreciated. I feel like this should be simple.
OK, so to resolve this problem I needed to change the JavaScript to actually grad a reference to the div i wanted the output in and inject then call the template with the data I wanted passed as an argument to the template
var hash1 = {
var1:'this is the data I want to render',
var2: 'this is some more data i want to render'};
document.querySelector('#thisdiv').innerHTML = blagTemplate(hash1);
And I changed my partial definition to :
<div class="blag-partial">
{{#with this}}
{{var1}}
{{var2}}
{{/with}}
</div>
My second mistake was that I thought I could inline this script inside a script tag in the page but it doesn't work at all.
I think my biggest mistake was in thinking that the 'express-handlebars' npm module was actually doing more for me than it actualy is doing.
In reality...it automatically compiles my templates and partials in any of the directories I specify and that's about it.
So when I look at tutorials like like https://www.youtube.com/watch?v=4HuAnM6b2d8 for example, I still need to do the same process really...I can just skip the compilation process because thetemplates / partials were already compiled in my express node server.
Now I realize this it's ok, I just misunderstood what I should expect.
If anybody has any knowledge to the contrary, please feel free to share.
I hope this can help at least 1 person, because it frustrated me for hours! :)
Related
I'm using MVC5 and passing model from Controller to View. In the view I have
var test = #Html.Raw(Json.Encode(Model.Data));
It work great, I have my model in the js variable. The problem is when I'm going to see my HTML code, the whole variable is rendered
Is there any way how I can remove or hide this code?
Thanks
To pass a variable from your server to the client you have two options really:
Do what you have done (but the value is rendered in markup)
Expose a webapi and query the endpoint in javascript to get the data
Option 2 is best practice.
Without more details on what you're trying to achieve I can't give a more detailed answer, but basically you should be looking into webapi to resolve this.
note: there are other things you could do like websockets and cookies, but it's unlikely that you want that kind of stuff for this
Because I am using ngInclude to switch different templates, each template contains the same form to call the same functions in the controller. I want to include a defined variable, like a table name, to the ngModel, so I can use it to filter the data in either js code or PHP code, in order to insert the information into the right table.
I did some researches but did not find any. Does anyone knows how to do it, or have better idea how to do it?
Thank you
You can use angular ui-router instead ngInclude for loading html template, then you can pass data as variable
take a look at this
https://angular-ui.github.io/ui-router/site/
sorry it is a stupid question and I just solve it, I added a value into the parameter of the submit function, like ng-click="submit(file, 'poster')", then use it to deal with the js code and php code.
Not entirely sure if "persistent templates" is what I am after, this is the first time I am using a Javascript templating engine. I am curious if there is a way of keeping the template data intact for the purposes of re-rendering a document once it has been rendered...
An example -- I define a simple template snippet:
<div id="price">Price: {{current_price}}</div>
I render it:
var template = Hogan.compile($("#price").html())
$("#price").html(template.render(price_data))
Let's say I want to update the price information every X seconds (fire a request, grab JSON and push it back to #price), re-rendering the template fails as there is no {{current_price}} any more. I could just do something along the lines of $('#price').text('Price: ' + price_data) after a succesful request but I feel this somehow makes the idea behind using templates useless.
So the question is, what is a way to re-use templates on a document? Cache the template data into a variable and re-use it when rendering or is there a more clever way?
Thanks.
You shouldn't be using a thing as its own template, you'll run into all sorts of problems (especially once you start adding mustache tags to attributes, or conditionally showing html tags, or anything like that).
Make your template its own element on the page. And do yourself a favor and use a <script type="text/x-mustache"> tag for it.
I have some table that ng-repeat is building. the table contains a lot of data, and sometimes the build phase of the html is taking 10-20 seconds on weak computers.
So i've started to explore about building the html in the server, but the problem is that i'll loose the data-binding, and i'm needing it because i have inline edit functionality in the table.
The ultimate solution will be rendering the table in the server-side, with all the directives remaining including the ng-repeat, and on the client, makes the ng-repeat recognize that the html already has been rendered for the first time and not render it again, until the first change in the data.
In the Angular source code in the ngRepeatDirective, there is the "lastBlockMap" object that contain mapping betwee each element created by ng-repeat, to his scope, in that structure :
clone: [THE_ELEMET]
id: "005"
scope: ChildScope
and from reading this arcticle :
http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm
i've got to conclusion that if i'll create this object, and pass it somehow to the ng-repaat directive, the directive will know that the html is already been rendered and will not render it again.
The problem is how to pass such information to ng-repeat???
Any one encountered this situation??
P.S.
I'm familiar with all the "ngRepeat preformance" posts and arcticles and have tried a lot of other options before approaching this solution, so please try to help me with this one.
Second P.S.
Sorry for my english... :)
There is no solution for compile the html into loop in angular.
maybe you need to try clean the json data you try to render and make it as simple as you can, and if you include directive inside the table, try to render it after the table is done.
also, try to isolate the reason for the slowness, disable the inline edit and all the other featers inside the table.
Use prerender.io to render the html on the server side. It basically opens a phantomjs process and executes the JS on the server, and serves the output. Works pretty well.
i'm trying to use the new MVC concept and therefore started witht the AccountManager Example (examples/simple). Everything works fine as far as I stick to the tutorial, but I tried to extend it a bit.
I define a border layout in 'Viewport.js' and assign a header component (views/Header.js) to 'north'
and a tab-Panel (views/MainPanel.js) which contains the 'views/user/List.js' as a tab.
Until now everything is ok.
But now i added another store (Profiles.js) and model (Profile.js),
changed the references in code to use profile-store instead of user-store.
I also updated the column-definition, imports ('requires') and everything es that is relevant(at least i think so...).
When i run my app i get a js-error in Observable.js -> addManagedListener-> 'item is undefined' when he tries to invoce the on-method of 'item'.
At first i tried hard to find the mistake i made in the code but I could not find anything,
so i started to play around a little bit and found out,
that it works as soon as I rename the folder 'user' in views/ to 'profile' (of course i had to fix some references in code too).
Is this behavior a bug or is it volitional?
If so can anybody please tell me how this is exactly working?
Thank you very much!
ExtJS looks for the Javascript files based on your model/view/controller declarations.
i.e. if in your tell your controller that you have a store called Profile (via the stores attribute) by default, it is going to look for a file at app_name/stores/Profile.js
The problem was that i had to give my controller a reference to the store and the model.
I didn't do that from the beginning, after my controller had a reference to the view, the view had a reference to the store and the store had a reference to the model.
So I assumed everything is ok.
But it seems to be mandatory to provide this information redundant as far as understand and i can live with that...