I've created a backbone.js app which uses inline templates, example of below:
<script type="text/html" id="header-template">
<div class='header'>
<strong><%= name %></strong>
</div>
</script>
Then in the the View:
template = _.template($("#header-template").html());
In Opera this throws an error due to $("#header-template").html() returning null. Does anyone know how to fix this issue?
Thanks
Update:
The error I'm getting in the console is Unhandled Error: 'App.view.header' is not a constructor. When I update underscore.js and backbone.js to the latest versions I also get this error in Chrome.
The header is defined like this:
App.view.header = App.view.header || {}
App.view.header = Backbone.View.extend({
...
});
and rendered like this in the router:
$('header').html( new App.view.header().render().el);
Another update
I've created a tiny backbone.js app which has the same problem:
http://goo.gl/KoOvq
You could wrap the template in a function and call it only when needed.
I like this way more because if you start to put your templates in another files they will be loaded only when needed, the way you are doing now they are loaded at the app start.
template = function(variables){ return _.template(template, variables) }
Related
Here are some details about our development environment:
-DevExpress 20.2.3 ( we are using DevExtreme )
-Microsoft Visual Studio Enterprise 2019 (Version 16.4.6)
-ASP.NET Core 3.1.0
-AspNetCore.Mvc 3.1.0.0
If I implement the following then document object is Not defined:
#using (Html.DevExtreme().NamedTemplate("upload-popup-template")) {
#await Html.PartialAsync("UpldPopupContentTmpltPartial", new HomeUpldPopupContentTmpltPartialViewModel()
{ SelectedUploadDataType =
document.getElementById('HiddenSelectedUploadDataType').Value });
}
Even if I try to embed within Script javascript tags, it still states that document object is undefined
#using (Html.DevExtreme().NamedTemplate("upload-popup-template")) {
<script type="text/javascript">
#await Html.PartialAsync("UpldPopupContentTmpltPartial", new HomeUpldPopupContentTmpltPartialViewModel()
{ SelectedUploadDataType =
document.getElementById('HiddenSelectedUploadDataType').Value });
</script> }
Could some please modify the following Razor/Javascript code in such a way that the JavaScript gets executed within the #Html.Raw ?
#using (Html.DevExtreme().NamedTemplate("upload-popup-template")) {
#await Html.PartialAsync("UpldPopupContentTmpltPartial", new
HomeUpldPopupContentTmpltPartialViewModel()
{ SelectedUploadDataType =
#Html.Raw("document.getElementById('HiddenSelectedUploadDataType').Value").ToString()
}); }
Correct me If I’m wrong but from DevExtreme NamedTemplate you are trying to pass on of its JS values to external partial razor view.
What you need to do is to make sure that JS will be embed into Razor syntax,
inside template. To achieve this please use JS() Expression.
Sample template passing local JS variable to external partial Razor View:
TestRazorView.cshtml
Please also read more about JS() Expression:
https://docs.devexpress.com/AspNetCore/401153/devextreme-based-controls/concepts/razor-syntax/specify-options#new-js-expression
Please also read more about DevExtreme Templates:
https://docs.devexpress.com/AspNetCore/401029/devextreme-based-controls/concepts/templates
I am following a template for dynamically choosing which model, route, controller to render with a render helper, as outlined in this question (and elsewhere). My problem is that we want to run with the Ember.ENV.RAISE_ON_DEPRECATION flag set, to catch problems before they develop into upgrade nightmares. I am calling Ember.Render from a handlebars helper, like this:
Ember.Handlebars.registerBoundHelper('renderModuleEdit', function(callingContext, module, options) {
var modelName = callingContext.get('type').get('modelName');
return Ember.Handlebars.helpers.render.call(callingContext, "edit_" + modelName, modelName, options);
});
The template has this code in it:
{{#each module in modules}}
<div class="tab-content" {{bind-attr class="module.active:active"}}>
{{renderModuleEdit module module}}
</div>
{{/each}}
The problem is that render fails on the test for 'quoteless parameters', even though I'm using call() on it, rather than a direct handlebars template syntax. The test is defined in the source on this line. The actual test is options.types[0] !== 'ID', and while the options parameter is available in the register helper function (first code block above), and thus I would be able to change the 1st type away from 'ID', I'm not sure what I can change it to that wouldn't cause something else to subtly break later. The error message comes through as:
Uncaught Error: Using a quoteless parameter with {{render}} is deprecated. Please update to quoted usage '{{render "edit_Intro"}}.
As I am not using {{render edit_Intro}} to make this call, I have no idea how to correct this. If I change the template code to {{renderModuleEdit 'module' 'module'}}, then the parameters to my renderModuleEdit come through as strings of 'module' rather than the model instance I need.
I feel like I have no understanding of what this test is actually for and what the 'quoteless' vs 'quoted' parameters even mean. Can someone explain this? Is there a way around this deprecation warning for calling render from a registered bound handlebars helper like this?
A dirty solution, but working for now:
Ember.Handlebars.registerBoundHelper('renderModuleEdit', function(callingContext, module, options) {
options.types[0] = "STRING"; // FIXME: hack
var modelName = callingContext.get('type').get('modelName');
return Ember.Handlebars.helpers.render.call(callingContext, "edit_" + modelName, modelName, options);
});
I also, wasn't able to find a proper fix yet :-/
I am binding my typeahead for users images to hogan template and the code actually works fine but I am getting errors in console as it tries to get a resource: localhost:####/%7B%7BuserBlankImgUrl%7D%7D
The only thing that make sense is that it is trying to bind to the template value instead of waiting for a value.
Full disclosure: My app is using DurandalJS and knockoutJS pretty heavily but I tried to just show the relevant code below. I will include more based on suggestions.
Template:
<img class="quarc-avatar-list-item" src="{{userBlankImgUrl}}" />
JS:
self.userImgUrl = ko.computed(function () {
return avatar.fromGravatar(self.email(), self.gender());
});
Other things I have tried include:
Wrapping the template in null checks so doesn't try and bind.
When I remove the template hmtl I don't get the resource error in my browser console
Tried to learn more hogan and typeahead options to look for other options. Not sure if something like a pre-render or setting default "local" values would help?
Thanks,
-Chris
The first thing I notice is your self.userImgUrl is not the same userBlankImgUrl used in your template - if this is intentional it's not clear from your posted snippets.
However, at some point your scripts are outputting the template without running it through your template object's render() method. The bad request is caused by the src attribute for the/an image tag litterally being "{{userBlankImgUrl}}". I'm guessing you're testing your app on a local server, so the address it looks up is http://localhost/.../{{userBlankImgUrl}} (unless the ### in your question isn't just you shortening/hiding the path and it really is requesting from localhost:####/%7B%7BuserBlankImgUrl%7D%7D - either way the problem (or at least part of it) is the same).
Hogan.js removes any undefined handlebar'd variables that appear in templates it renders:
var template = Hogan.compile(
'<img class="quarc-avatar-list-item" src="{{undefinedVariable}}" />'
);
console.log( template.render({var1: "Test", var2: "Again"}) );
Will output to console:
<img class="quarc-avatar-list-item" src="" />
If anything appears in the src attribute or in the place of any {{templateVar}} where a null or undefined value was given then you know your template was outputted without going through the proper render method.
I am discovering angularJS, but I get an error Argument 'LawContrl' is not a function, got undefined. In my form, I have in my rails app
%div{"ng-controller" => "LawContrl"}
=form-for ...
%li{"ng-repeat"=>"entry in entries"} {{entry.name}} //I am using haml file
in my laws.js.coffee file, I have
#LawContrl = ($scope) ->
$scope.entries = [
{ name: "hi"}
{name: "ho"}
]
Ok, I think I got it. I don't know what ide you're using, but rename (or refactor then rename if you're using Eclipse or Rubymine) your application.js.coffee to application.js and everything must be working just fine. Btw, you should declare some LawContrl module in your angularJS so the controller can be passed to the view
Not sure what it could be, some things to check that might help with debugging this:
angular.js library script is included only once in the page
LawContrl script is included in the page after angular.js
ng-app attribute (it can be empty) is present in the HTML
If ng-app has a value, e.g. ng-app="foo", then LawContrl should be part of the foo module
I'm learning emberjs and I've done a pretty simple example. The HTML template is:
<script type="text/x-handlebars">
Hello <b>{{App.appOwner}}</b>
</script>
And then the javascript is:
App = Ember.Application.create({
appOwner : 'Erik'
});
App.appOwner = 'Tom';
Which does pretty much what you expect. The emberjs.com documentation says templates are auto-updating -- so I added this:
$(document).click(function() {
console.log('HERE!');
App.appOwner = 'Alphonse';
});
Which quite unexpectedly failed. I had added the console.log just to make sure the click handler was being called, which it was. Why doesn't it update?
You need to use .set() mutator method, because javascript doesn't have facilities to intercept the direct properties changes:
App.set('appOwner', 'Alphonse');