I am new to both backbone and dot.js. I need help in integrating external dot.js file in to my backbone file.
My backbone file looks like
success :function() {
SearchView = Backbone.View.extend({
template: doT.template(dotView(id,fullurl)),
initialize: function() {
_.bindAll(this);
this.render();
},
render: function() {
this.$el.html(this.template({data: data.entries}));
}
});
var search_view = new SearchView({ el: $("#search_container") });
}
where in "dot.Template" I am calling dotView which is present in dot.js file. This method is working fine but I want to impliment it using ajax.
my dot.js file looks like
function dotView(id,fullurl){
temp = "{{~ it.data :value }}{{ if (check('{{=value.guid}}') == true) { }}<p>{{= value.title}}</p><p>{{= value.author}}</p><p>{{= value.description}}</p>";
temp = temp + "{{~ it.data :value }}{{~ value.media$content :video}} {{ if (bitrate('{{= video.plfile$bitrate}}') == true) { }} {{ trigger_video(video.plfile$url); }} {{ } }} {{~}}{{~}}{{ } }}{{~}}";
temp = temp + "<br/><div><b>See More:</b></div>{{~ it.data :value }}{{ if (check('{{=value.guid}}') != true) { }}{{~ value.media$thumbnails :photo}} {{ if (compare('{{=photo.plfile$width}}') == true) { }}<a href='details.html?id={{=value.guid}}&feed={{=fullurl}}'><img src='{{=photo.plfile$url}}' width='80' height='60'></img></a> {{ } }} {{~}} {{ } }}{{~}}";
return temp;
}
Please help in this
RequireJS is recommended, it has a !text plugin. let you store your template in a text file. And requireJS will load it asynchronizely when you "require" it.
Related
I have managed to narrow down the error message I am receiving to one line.
ReferenceError: property is not defined
((__t = ( property )) == null ? '' : __t) +
The View Controller is as follows (simplified for brevity)
workSpace.viewMain = Backbone.View.extend({
// WORKS
// template: _.template($("#desk-view-main").html()),
// DOESNT WORK
template: _.template(window.JST["public/js/app/templates/desk-view-main.html"]()),
// DOESNT WORK
// template: _.template(window.JST["public/js/app/templates/desk-view-main.html"](), {"key": "value"}),
el: '#pw-main',
initialize: function() {
this.render();
},
render: function(a) {
var dictionary = {"key": "value"}
var html = that.template(dictionary);
$(that.el).append(html);
}
});
The compiled file looks as follows
this["JST"] = this["JST"] || {};
this["JST"]["public/js/app/templates/desk-view-main.html"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += ' <nav id="tweak"></nav>\n <div class="desk">\n <h3>Workspace:</h3>\n <strong> ' +
((__t = ( property )) == null ? '' : __t) +
'</strong>\n\n <h3>end Workspace:</h3>\n </div>\n</div>\n';
}
return __p
};
From the following public/js/app/templates/desk-view-main.html
<div class="desk">
<h3>Workspace:</h3>
<span> <%= property %></span>
<h3>end Workspace:</h3>
</div>
So far I haven't been able to work out the correct pattern to use a compiled template with variables (it works fine if I remove the property variable).
I'm doing some testing with Angular to see if I can replicate what I already have in PHP more efficiently.
I have a set of data stored in JSON:
[
{
"name":"Blue Widget",
"description":"blue-widget",
"snippet":"The best blue widget around!",
"category":"Home Widgets",
"popular":true
},
{
"name":"Red Widget",
"description":"red-widget",
"snippet":"The best red widget around!",
"category":"Outdoor Widgets",
"popular":true
},
{
"name":"Green Widget",
"description":"green-widget",
"snippet":"The best green widget around!",
"category":"Work Widgets",
"popular":true
},
{
"name":"Yellow Widget",
"description":"yellow-widget",
"snippet":"The best yellow widget around!",
"category":"Home Widgets",
"popular":true
}
]
I'm grabbing this in my controller and adding it to my view in a fairly standard way (yes, I know not to use $http directly in a controller in production):
widgetApp.controller('widgetListCtrl', function($scope,$http){
$http.get('widgets/widgets.json').success(function(data){
$scope.widgets = data
})
})
If I use:
<li ng-repeat="widget in widgets">{{widget.category}}</li>
Then naturally it will just go through and list:
Home Widgets
Outdoor Widgets
Work Widgets
Home Widgets
What I'd like to do is generate a list of each widget.category but with each category only appearing once, so a user could then click on a category and be shown all the widgets in that category. How can I go about this? Sorry, I haven't got anything to go on because I pretty much have no idea where to start.
You can use the existing 'unique' filter from AngularUI.
<li ng-repeat="widget in widgets | unique: 'widget.category' ">{{widget.category}}</li>
Be sure to include a reference to the filters module in your app as well (e.g. angular.module('yourModule', ['ui', 'ui.filters']);).
You'd have to build a list of unique categories:
widgetApp.controller('widgetListCtrl', function($scope,$http){
$http.get('widgets/widgets.json').success(function(data){
$scope.uniqueCategories = [];
for (var i = 0; i < $scope.widgets.length; i++) {
if ($scope.uniqueCategories.indexOf($scope.widgets[i].category) === -1)
$scope.uniqueCategories.push($scope.widgets[i].category);
}
});
});
Make a dropdown with the model set to the category:
<select ng-model="categoryFilter" ng-options="category as category for category in uniqueCategories"></select>
And use a filter on your repeat:
<li ng-repeat="widget in widgets | filter: { category: categoryFilter }">{{widget.category}}</li>
Create a filter
app.filter('unique', function() {
return function (arr, field) {
return _.uniq(arr, function(a) { return a[field]; });
};
});
In Markup
<li ng-repeat="widget in widgets | unique:'category'">{{widget.category}}</li>
Create a distinct filiter and use it on your view:
angular.filter("distinct", function () {
return function (data, propertyName) {
if (angular.isArray(data) && angular.isString(propertyName)) {
var results = [];
var keys = {};
for (var i = 0; i < data.length; i++) {
var val = data[i][propertyName];
if (angular.isUndefined(keys[val]) && val != null) {
keys[val] = true;
results.push(val);
};
};
return results;
}
else {
return data;
}
}
})
<li ng-repeat="widget in widgets | distinct:'category'">{{widget.category}}</li>
I am currently adding a CSV email-list option to an existing AngularJS-based site. I use Papa Parse to parse the CSV straight to objects. What I need to do is have these results add up to the HTML and filter them so that only the email addresses will appear in the results, which will then later be counted for sending. How can I filter a CSV parse reult so that it only displays email addresses and ignores all the other values? Naturally, this would have to be done using just Angular to avoid conflicts.
Here's the Papa Parse section:
$('input[type=file]').parse({
config: {header: true,
step: function(results, handle) {
rows = _.union(rows, results.data);
console.log("Row data:", results.data);
console.log("Row errors:", results.errors);
// Define HTML output
//
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
}
$.each(results.data, function(i, el) {
var row = $('<ng-form ng-repeat="row in rows"/>');
row.append($('').text(i));
$.each(el, function(j, cell) {
if (cell !== "")
row.append($('<td type="text" class="form-control csv-form medium" ng-model="row.email"></td>').text(cell));
});
$("#results").append(row);
});
}
}
});
function FileUploadCtrl(scope) {
scope.setFiles = function(element) {
scope.$apply(function(scope) {
console.log('files:', element.files);
// Turn the FileList object into an Array
scope.files = []
for (var i = 0; i < element.files.length; i++) {
scope.files.push(element.files[i])
}
scope.progressVisible = false
});
};
scope.uploadFile = function() {
var fd = new FormData()
for (var i in scope.files) {
fd.append("uploadedFile", scope.files[i])
}
var xhr = new XMLHttpRequest()
xhr.upload.addEventListener("progress", uploadProgress, false)
xhr.addEventListener("load", uploadComplete, false)
xhr.addEventListener("error", uploadFailed, false)
xhr.addEventListener("abort", uploadCanceled, false)
xhr.open("POST", "/fileupload")
scope.progressVisible = true
xhr.send(fd)
}
}
}
);
},
This should be the HTML part:
<div ng-file-select="onFileSelect($files, angular.element(this).scope())" data-multiple="true" ng-list ng-model="csv" id="fileToUpload" title="Select file" ng-change="angular.element(this).scope().setFiles(this)">
<i class="fa fa-upload"></i> {{ 'Import CSV' | Translator }}
Hi I have a problem with $bind, I am binding a model and outputting the models via a ng-repeat. The ng-repeat outputs the stored data and also offers some fields for adding/changing data. The changes are reflected in the scope but are not being synced to Firebase.
Is this a problem with my implementation of $bind?
The HTML:
<iframe id="fpframe" style="border: 0; width: 100%; height: 410px;" ng-if="isLoaded"></iframe>
<form>
<ul>
<li ng-repeat="asset in upload_folder" ng-class="{selected: asset.selected}">
<div class="asset-select"><input type="checkbox" name="selected" ng-model="asset.selected"></div>
<div class="asset-thumb"></div>
<div class="asset-details">
<h2>{{asset.filename}}</h2>
<p><span class="asset-filesize" ng-if="asset.size">Filesize: <strong><span ng-bind-html="asset.size | formatFilesize"></span></strong></span> <span class="asset-filetype" ng-if="asset.filetype">Filetype: <strong>{{asset.filetype}}</strong></span> <span class="asset-dimensions" ng-if="asset.width && asset.height">Dimensions: <strong>{{asset.width}}x{{asset.height}}px</strong></span> <span class="asset-type" ng-if="asset.type">Asset Type: <strong>{{asset.type}}</strong></span></p>
<label>Asset Description</label>
<textarea ng-model="asset.desc" cols="10" rows="4"></textarea>
<label>Creator</label>
<input type="text" ng-model="asset.creator" maxlength="4000">
<label>Release Date</label>
<input type="text" ng-model="asset.release">
<label for="CAT_Category">Tags</label>
<input type="text" ng-model="asset.tags" maxlength="255">
</div>
</li>
</ul>
</form>
The Controller: (fpKey is a constant that stores the Filepicker API key)
.controller('AddCtrl',
['$rootScope', '$scope', '$firebase', 'FBURL', 'fpKey', 'uploadFiles',
function($rootScope, $scope, $firebase, FBURL, fpKey, uploadFiles) {
// load filepicker.js if it isn't loaded yet, non blocking.
(function(a){if(window.filepicker){return}var b=a.createElement("script");b.type="text/javascript";b.async=!0;b.src=("https:"===a.location.protocol?"https:":"http:")+"//api.filepicker.io/v1/filepicker.js";var c=a.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);var d={};d._queue=[];var e="pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");var f=function(a,b){return function(){b.push([a,arguments])}};for(var g=0;g<e.length;g++){d[e[g]]=f(e[g],d._queue)}window.filepicker=d})(document);
$scope.isLoaded = false;
// Bind upload folder data to user account on firebase
var refUploadFolder = new Firebase(FBURL.FBREF).child("/users/" + $rootScope.auth.user.uid + "/upload_folder");
$scope.upload_folder = $firebase(refUploadFolder);
$scope.upload_folder.$bind($scope,'upload_folder');
// default file picker options
$scope.defaults = {
mimetype: 'image/*',
multiple: true,
container: 'fpframe'
};
// make sure filepicker script is loaded before doing anything
// i.e. $scope.isLoaded can be used to display controls when true
(function chkFP() {
if ( window.filepicker ) {
filepicker.setKey(fpKey);
$scope.isLoaded = true;
$scope.err = null;
// additional picker only options
var pickerOptions = {
services:['COMPUTER', 'FACEBOOK', 'GMAIL']
};
var storeOptions = {
location: 'S3',
container: 'imagegrid'
};
var options = $.extend( true, $scope.defaults, pickerOptions );
// launch picker dialog
filepicker.pickAndStore(options, storeOptions,
function(InkBlobs){
uploadFiles.process(InkBlobs, $scope.upload_folder);
},
function(FPError){
$scope.err = FPError.toString();
}
);
} else {
setTimeout( chkFP, 500 );
}
})();
}])
I also have a service handling the input from Filepicker, this creates new entries in the firebase at the reference that is bound (using Firebase methods rather than AngularFire maybe this breaks the binding?)
.service('uploadFiles', ['$rootScope', 'FBURL', function($rootScope, FBURL) {
return {
process: function(InkBlobs, upload_folder) {
var self = this;
var countUpload = 0;
// write each blob to firebase
angular.forEach(InkBlobs, function(value, i){
var asset = {blob: value};
// add InkBlob to firebase one it is uploaded
upload_folder.$add(asset).then( function(ref){
self.getDetails(ref);
countUpload++;
});
});
// wait for all uploads to complete before initiating next step
(function waitForUploads() {
if ( countUpload === InkBlobs.length ) {
self.createThumbs(upload_folder, { multi: true, update: false, location: 'uploads' });
} else {
setTimeout( waitForUploads, 500 );
}
})();
},
getDetails: function(ref) {
// after InkBlob is safely stored we will get additional asset data from it
ref.once('value', function(snap){
filepicker.stat(snap.val().blob, {size: true, mimetype: true, filename: true, width: true, height: true},
function(asset) {
// get asset type and filetype from mimetype
var mimetype = asset.mimetype.split('/');
asset.type = mimetype[0].replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
asset.filetype = mimetype[1];
// add metadata to asset in upload folder
ref.update(asset);
});
});
},
createThumbs: function(ref, options) {
var self = this;
// default options
options.multi = options.multi || false;
options.update = options.update || false;
options.location = options.location || 'asset';
// if pathbase is not provided generate it based on provided location
if (!options.pathbase) {
if (options.location === 'assets') {
options.pathbase = FBURL.LIBRARY + "/assets/";
} else if (options.location === 'uploads') {
options.pathbase = "/users/" + $rootScope.auth.user.uid + "/upload_folder/";
} else {
throw new Error('SERVICE uploadFiles.createThumbs: options.location is not valid must be assets or uploads');
}
}
var generateThumb = function(blob, path) {
filepicker.convert( blob,
{ width: 200, height: 150, fit: 'crop' },
{ location: 'S3', access: 'public', container: 'imagegrid', path: '/thumbs/' },
function(tnInkBlob){
var refThumbBlob = new Firebase(FBURL.FBREF).child(path);
refThumbBlob.set(tnInkBlob);
},
function(FPError){
alert(FPError);
},
function(percentage){
// can use to create progress bar
}
);
};
if (options.multi) {
// look at all assets in provided ref, if thumbnail is mission or update options is true generate new thumb
angular.forEach(ref, function(value, key){
if (typeof value !== 'function' && (!value.tnblob || options.update)) {
// thumb doesn't exist, generate it
var blob = value.blob;
var path = options.pathbase + key + '/tnblob';
generateThumb(blob, path);
}
});
} else {
// getting thumbnail for a single asset
var refAsset = new Firebase(FBURL.FBREF).child(options.pathbase + ref);
var blob = refAsset.val().blob;
var path = options.pathbase + ref + '/tnblob';
generateThumb(blob, path);
}
}
};
}]);
So to recap, data is being saved to /users/$rootScope.auth.user.uid/upload_folder and this is being rendered in the HTML. Changes in the HTML form are reflected in the scope but not in Firebase, despite the binding:
var refUploadFolder = new Firebase(FBURL.FBREF).child("/users/" + $rootScope.auth.user.uid + "/upload_folder");
$scope.upload_folder = $firebase(refUploadFolder);
$scope.upload_folder.$bind($scope,'upload_folder');
Any ideas as to why this is? Is my implementation incorrect or am I somehow breaking the binding? Is $bind even supposed to work with ng-repeat in this manner?
Thanks
Shooting myself for how simple this is, the error was in how I defined the binding. You can't set the binding on itself, you need two separate objects in the scope...
The firebase reference $scope.syncdata loads the initial data and all modifications made to $scope.upload_folder will be synced to firebase.
var refUploadFolder = new Firebase(FBURL.FBREF).child("/users/" + $rootScope.auth.user.uid + "/upload_folder");
$scope.syncdata = $firebase(refUploadFolder);
$scope.syncdata.$bind($scope,'upload_folder');
I'm trying to figure out how to update my models with services, when I get a response from the server.
My JSON structure:
var dgs = [{id :1,
driver:'Sam',
type: 'bus',
segments:[ {id:1,origin:'the bakery',arrival:'the store'},
{id:2,origin:'the store' ,arrival:'somewhere'}]
},
{ ... },
{ ... }
];
index.html:
<body ng-controller="dgCtrl">
<div ng-repeat="dg in dgs" drivegroup></div>
</body>
dg.html:
<div> {{ dg.driver }} </div>
<div> {{ dg.type }} </div>
<div ng-repeat="seg in dg.segments" segments></div>
segments.html:
<div>
<input ng-model="seg.origin" ng-blur="updateSegment()"/></div>
<div>
<input ng-model="seg.arrival" ng-blur="updateSegment()"/></div>
My controller is the following:
function dgCtrl($scope,$http,DriveGroup,Segment) {
var segment = new Segment;
$scope.dgs = DriveGroup.query(); // load & display all drive groups
$scope.updateSegment = function() {
var seg = this.seg;
segment.seg = this.seg;
segment.id = this.seg.id;
segment.$update(function(data,x) {
// seg.origin = data.origin - This updates the origin.
seg = data; // This doesn't work. How can I do this?
});
}
My services:
angular.module('dgService',['ngResource']).
factory("DriveGroup",function($resource) {
return $resource(
'/path/dgs',
{},
{update:{method:'PUT'}}
);
});
angular.module('Segment',['ngResource']).
factory('Segment',function($resource) {
return $resource(
'/path/seg/:id',
{id:'#id'},
{update:{method:'PUT'}}
);
});
My problem is I'm not sure how to update on a per-segment basis using $resource. I want to make a change on a certain segment, so I make a put request. I get the response from the server and want to update my model (which isn't working).
I'm new to Angular, so if you see any other blatant mistakes/or structure issues suggestions are appreciated. Thanks.
EDIT:
The following achieves the results I want, but is this correct?
$scope.updateSegment = function() {
var seg = this.seg,
segment = new Segment(seg);
segment.$update(function(data,x) {
angular.extend(seg,data);
});
}