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.
Related
I'm trying to implement the top solution here, the one that only uses javascript:
Django: how to change the choices of AdminTimeWidget
It basically uses regex to create the different time choices by overriding the time options.
The only problem I have is that my script loads before DateTimeShortcuts.js, so I get an Uncaught ReferenceError: DateTimeShortcuts is not defined. Does anyone know how I can force the DateTimeShortcuts.js file to load after my js file that references it?
If I create a second reference to DateTimeShortcuts.js, it'll work properly, but I'll have two clocks up there, only the 2nd one will modify, because it's loading after the 2nd DateTimeShortcuts.js
I'm calling my file like this, where admin_clock.js references DateTimeShortcuts.js and has the override code:
class EventAdmin(admin.ModelAdmin):
list_filter = ('film', 'partner',)
list_display = ('id', partner', 'film', 'date_time', 'venue_name', 'city')
class Media:
js = ('tiny_mce/tiny_mce.js', 'tiny_mce/textareas.js', 'admin_clock.js',)
Apologies for not commenting on the original answer, I need more points to comment there.
The way I solved this was to add the javascript directly to the extrahead block of my version of the change_form template, overriding that block in the template: https://docs.djangoproject.com/en/1.6/ref/contrib/admin/#overriding-admin-templates
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 have some AngularJS stuff that holds a bunch of arrays and data. Once a user uploads a file, the file gets parsed up and saved into the scope with its different arrays. However, after all of this and the file is held in the scope, I try to update the innerHTML, but the AngularJS code does not work. I use ng-repeat to create a table based on the arrays, but it remains a single cell with content looking like {{column}} and the like.
I have had extreme difficulty using directives and templates because my index.html says that app and module, etc, are undefined when I do something such as app.directive(...
The significant parts of my index.html file include:
<html ng-app>
... //once a file is uploaded, total.js is called;
//this was so the app didn't try to run before a file was uploaded
<div id="someStuff">This will become a table once a file is uploaded</div>
This is a simple example of how my scope is set up in total.js:
function sheet($rootScope, $parse){
$rootScope.stuff = text;
//text is a variable that contains the file's contents as a string
};
document.getElementById('someStuff').innerHTML="<div ng-controller='sheet'>{{stuff}}</div>";
The HTML changes but instead of printing the file's contents, it only prints {{stuff}}.
How can I get the innerHTML to understand that it contains AngularJS, preferably without using a partial or a directive, unless you can thoroughly explain where I'd input it and the syntax of it.
Edit 1:
I have tried using $compile but it is marked as undefined. I looked at this to figure out the compile problem, but I don't understand rtcherry's syntax, and how I should apply it to my own code.
Edit 2:
I still receive $compile undefined errors when I include it like so:
function sheet($rootScope, $parse, $compile){...};
document.getElementById('someStuff').innerHTML=$compile("<div ng-controller='sheet'>
{{stuff}}</div>")(scope);
Edit 3:
While itcouldevenbeaboat's comment was extremely unhelpful, I decided I should perhaps show you the directive way I attempted to do it.
I included this code under my sheet function:
var app = angular.module('App', []);
app.directive('spreadsheeet', function($compile){
return{
templateUrl: innerHTML.html
}
});
Where innerHTML contains <div ng-controller='sheet'>{{stuff}}</div>and on index.html I've included <div spreadsheet></div>
With this, I receive no errors, but the text does not show up, neither as {{stuff}} or as the file's contents. Even when I do something simple, such as provide template: "<h2>Hello!</h2>" instead of a templateUrl, I cannot get Hello! to print.
It works for me
document.getElementById('someStuff').innerHTML = "<div ng-controller='sheet'>{{stuff}}</div>";
$compile( document.getElementById('someStuff') )($scope);
Simple solution (it will work 100%):
In controller, don't forget to inject $document in controller as a dependency, like this:
App.controller('indiaController', function ($scope, $document,$filter, $location) {
var text_element = angular.element($document[0].querySelector('#delhi');
text_element.html('your dynamic html placed here');
}
I'm struggling with this even after reading the MSDN documentation and the following online guides:
Codefoster
Stephen Walter
I think my problem is easy to fix and that I just am thinking about something in the wrong way. Basically I am querying my web service and on success running the following method. I am then trying to bind the result to my listview. For now I am using a hardcoded value publicMembers.itemlistwhich has been declared at the top of the document just to make sure I can actually bind to the list before doing it with my query results. Ignore line 2 for now.
Success Method:
_lookUpSuccess: function xhrSucceed(Result) {
var response = JSON.parse(Result.responseText);
listView = document.querySelector("#termTest");
ui.setOptions(listView, {
itemDataSource: publicMembers.itemList,
itemTemplate: document.querySelector(".itemtemplate"),
})
},
Now, instead of using document.querySelector, I have also tried with WinJS.Utilities.id and WinJS.Utilities.query, neither of which worked either. This doesn't break my code and introduce an error but it doesn't bind to the listview either so I think I have an issue in querying the right DOM element. However exactly the same code does work if I add it to the top of the script, it is only when I place it in this method that it stops working.
EDIT: Also to clarify, when I debug publicMembers.itemList is storing the values I expect them to be.
Please point out if I have explained things poorly and I will try and improve my question.
Thanks.
I haven't used WinJS.UI.setOptions, but rather this other way of setting the data source. Can you see if it works?
_lookUpSuccess: function xhrSucceed(result) {
var response = JSON.parse(result.responseText);
listView = document.querySelector("#termTest");
listView.winControl.itemDataSource = publicMembers.itemList;
},
This would assume you're defining the itemTemplate as part of the data-win-options attribute of your ListView's HTML element. You could also probably just do listView.winControl.itemTemplate = document.querySelector(".itemtemplate") if you prefer to set it programmatically.
I am displaying a collection of "messages" in my Meteor app. When my template "messages" is rendered, I apply this jQuery plugin called "gridalicious", which basically displays the messages in a pinterest-like format.
All works well, but when I insert a new message, that new message is displayed twice. When I refresh the browser, the duplicate is gone.
I'm applying the plugin as follow
Template.messages.rendered = ->
$("#message_box").gridalicious
width:250
animate:false
selector:".message"
gutter:0
Basically, if I get rid of this plugin, things messages display correctly, without any duplicates.
I'm not sure what would be causing this problem.
yes, i have similar prob like this. for this plugin or same satuation, to avoid it duplicates your template instance you can try make a global variable to handle your message box status, add some condition to decide if this new message's id is already been inside your global status handler and already been rendered, then don't render it twice.
global scope
isAlreadyBeenReneredId = null
Template instance of messages
Template.messages.rendered = ->
if isAlreadyBeenReneredId isnt #data._id
isAlreadyBeenReneredId = #data._id
options =
width: 250
gutter: 0
$("#message_box").gridalicious options
not real code, but some idea you might want to try.
As far as I know, Meteor does not render everything again and again, but only the differences. So I think the problem is, that you call the jQuery plugin multiple times on the same element.
I don't know the plugin, but there seems to be an append method, maybe this could be useful?
Try this:
if (Meteor.isClient) {
Meteor.startup(function () {
$(document).ready(function (){
$("#message_box").gridalicious({
width:250,
animate:false,
selector:".message",
gutter:0
});
});
});
}
Sorry I didn't know how to write the equivalent in coffescript.