I create a backbone project with text.js, underscore.js, require.js and backbone.js. I separated header, body and footer of my web page into html file using text.js.
Here is my view :
define(["jquery" ,
"underscore" ,
"backbone" ,
"text!templates/Layout/footer.html",
],function($ , _ , Backbone, FooterTem){
var serviceTag = Backbone.View.extend({
initialize : function(){
},
render : function(){
var footerTem = _.template(FooterTem);
$("#webfooter").html(footerTem);
}
});
return serviceTag;
});
Then in footer.html of text.js, I want to call the other third party function (the footer is used almost every web page) :
<div id="footer">
<div class="containerFooterUL">
<%
define(["jquery" ,
"webconfig",
"content"
],function($ , WebConfig, Content){
var content = new Content();
console.log(content.getContentType());
console.log("1");
});
%>
</div>
</div>
The console.log didn't work, Any idea what could be causing this? Thanks.
Change define in your template to require. The define call is for defining modules. If you just want to use modules at arbitrary places in your code, you should use require.
Related
I am wondering if I can make an Angular Js directive then I can use it again on the run time
here is a simple example
app.directive('w34Directive',function(){
return{
template : "<p>test</p>"
}
})
and here is the HTML
<div w34-directive></div>
but if I have a button with ng-click function that do the following function in the controller
var elem = document.querySelector('.myContainer');
angular.element(elem).append("<div w34-directive></div>");
which mean that a new DOM uses the directive will be generated but actually the angular directives fire once on the page load so when I add the new DOM it just add an empty div tag without the template of the directive which is in this case :
<p>test</p>
any idea about how to overcome this ?
Yes, you can do it using :
$compile
Exemple :
var el = $compile( "<div w34-directive></div>" )( $scope );
angular.element(elem).append( el );
I am new to Angular and trying to figure out how to adapt an ASP.NET app into Angular. I need to display a different link to the user depending on the group the user belongs to. I have a Web API (ASP.NET Web API) that I can call to determine the user. I am using the following Angular code to call the Web API, but what I am unsure of is what to do next. If $scope.userGroupInfo contains the group the user belongs to how do I then display a different link in HTML depending on the group?
AngularJS
(function() {
var app = angular.module("linkSwitcher", []);
var MainController = function($scope, $http) {
var onApiCallComplete= function(response) {
$scope.userGroupInfo = response.data;
};
var onError = function(reason) {
$scope.error = "There was a problem calling the API";
};
$scope.getUserGroup = function(userId) {
$http.get("https://myapi.mysite.com/api/clients/getUserGroup/" + userId)
.then(onApiCallComplete, onError);
};
};
app.controller("MainController", MainController);
}());
HTML
<body ng-controller="MainController">
<form name="GetGroup" ng-submit="getUserGroup()">
<input type="submit" value="Lookup User Group Link" />
</form>
</body>
Please assume I have referenced the Angular library properly and that I am just displaying the portion of HTML that calls the Angular script.
well, what do you want to change in the display? you can try using ng-if="" inside a tag to show it, or you can use ng-class="someObjectMappingClassNameToBoolean" to modify the class depending on some flag.
Ex: (I don't know the structure of your response)
<div ng-if="userGroupInfo.groupId=== 7" > <a>Show me if userGroupInfo.groupId equals to 7 is true!</a> </div>
or
<div ng-class="{'blue-class': userGroupInfo.isBlue === true, 'error': userGroupInfo.isError === true }" > <a>Blue class added if isBlue is true, error class if isError is true</a></div>
You can also use ng-href to generate a calculated hyperlink, either as a whole or just as part, e.g. ng-href="http://path.to/{{groupName}}"
I have a simple component that is being included using ng-include. The controller of the component is assigned in the included HTML.
I would like to use the same component twice (or more) but load different data.
What I've tried to do is parse the JSON and create new objects (which works fine) but i can't assign the data to the appropriate component using it's id attribute.
Any help will be nice. A directive? jQuery?
I know this is a some-what weird way of doing it, so I'll add that at the moment the project's business logic needs this r similar behaviour.
JSON:
[
{
"componentId" : 'component1",
"data" : "Hello"
},
{
"componentId" : 'component1",
"data" : "World"
}
]
Component Template (someTemplate.tpl.html)
<div data-ng-controller="DefaultController">
<h2>{{message}}</h2>
</div>
Main HTML
<div data-ng-controller="MainController">
<div data-ng-include="'someTemplate.tpl.html'" id="component1"></div>
<div data-ng-include="'someTemplate.tpl.html'" id="component2"></div>
</div>
Controller
function DefaultController($scope){
var componentId = ???
$scope.message = $scope[componentId].data;
}
Main controller
function MainController($scope, $http){
$http.get('data.json').then(function(response){
$scope.data = response;
for(var i in $scope.data){
$scope[$scope.data[i].componentId] = $scope.data[i].data;
}
}
}
I'm pretty new to Backbone.js and Require.js. In my app I'm loading templates into each module via require (using the text! plugin), just as follows:
define([
'jQuery',
'Underscore',
'Backbone',
'API',
'Utils',
'text!templates/home/register.html'
], function($, _, Backbone, api, utils, registerTpl){
var registerView = Backbone.View.extend({
el: $("#content"),
render: function(){
this.el.html(registerTpl);
},
{...}
I don't know how to bind data models or directly load data into my templates as shown in the backbonetutorials.com examples, something like this:
{...}
render: function(){
//Pass variables in using Underscore.js Template
var variables = { search_label: "My Search" };
// Compile the template using underscore
var template = _.template( $("#search_template").html(), variables );
// Load the compiled HTML into the Backbone "el"
this.el.html( template );
},
{...}
<script type="text/template" id="search_template">
<!-- Access template variables with <%= %> -->
<label><%= search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
Any insight, tip or code snippet will be appreciated.
Well that's simple, in the tutorial it takes the template data directly from the DOM while you pass it as reference with require js.
You can just do something like this:
template = _.template(registerTpl),
render: function(){
var variables = { search_label: "My Search" };
this.el.html(this.template(variables));
return this;
},
Instead, if you want to use your model's data with your template:
this.el.html(this.template(this.model.toJSON()));
I'm trying to use a simple inline underscore.js template with backbone, and pulling the template from a <script> tag via jQuery's html() method.
The page is supposed to render multiple Recipe callouts for each returned by the Recipe Model. It works on the first thumbnail, but on the second, it seems the <script> tag has been removed from the DOM, so underscore fails to render it and bails with str is null on line 913
For the template, I have
<script type="text/html" id="user-recipe-rated-template">
<div class="user-recipe-rated">
<a class="thumb" href="<%= href %>"></a>
<p><%= title %></p>
</div>
</script>
And the backbone view looks like:
var UserRecipeView = Backbone.View.extend({
initialize : function() {
this.template = _.template($("#user-recipe-rated-template").html());
},
render : function()
{
this.el = this.template({
title: this.model.get("Title"),
href: '#'+this.model.get('UserContentId'),
image_src: this.model.get('ThumbnailSrc')
});
return this;
}
});
So, what I am seeing is that $("#user-recipe-rated-template") exists on the first thumbnail and all is well. On the second, it returns an empty array and underscore can't proceed.
I've trying memoizing the string of html and such, and that might work, but it seems there should be a cleaner way of doing this. What am I doing wrong?
(I'd like to use templates inlined as opposed to external JST for now to keep things simple - it seems nicer to have the template embedded in the page near where it will be loaded when the data comes in)