Using ECT template with Chaplin - chaplinjs

Hello I want to use ect templates with the Chaplin js. I am not able to integrate the ect template the way Handlebar is integrated as per Chaplin boiler plate.Please help thanks.

I found the way for this you just need to override the render function as per the syntax of the ect template in your application base view class.
I did it in this way
render : function() {
var $templateHtml, html, templateFunc;
if (this.disposed) {
return false;
}
var data = { message : 'Hello, World!' };
html = ECT({ root : 'js/templates' }).render(this.templateName,data)
if (!this.noWrap) {
this.$el.html(html);
}
else {
$templateHtml = $(html);
if ($templateHtml.length > 1) {
throw new Error('There must be a single top-level element when ' + 'using `noWrap`.');
}
this.undelegateEvents();
this.setElement($templateHtml, true);
}
return this;
}

Related

looping through DOM / mootools sortables

I can't seem to get a handle on my list of sortables. They are a list of list elements, each with a
form inside, which I need to get the values from.
Sortables.implement({
serialize: function(){
var serial = [];
this.list.getChildren().each(function(el, i){
serial[i] = el.getProperty('id');
}, this);
return serial;
}
});
var sort = new Sortables('.teams', {
handle: '.drag-handle',
clone: true,
onStart: function(el) {
el.fade('hide');
},
onComplete: function(el) {
//go go gadget go
order = this.serialize();
alert(order);
for(var i=0; i<order.length;i++) {
if (order[i]) {
//alert(order[i].substr(5, order[i].length));
}
}
}
});
the sortables list is then added to a list in a loop with sort.addItems(li); . But when I try to get the sortables outside of the sortables onComplete declaration, js says this.list is undefined.
Approaching the problem from another angle:
Trying to loop through the DOM gives me equally bizarre results. Here are the firebug console results for some code:
var a = document.getElementById('teams').childNodes;
var b = document.getElementById('teams').childNodes.length;
try {
console.log('myVar: ', a);
console.log('myVar.length: ', b);
} catch(e) {
alert("error logging");
}
Hardcoding one li element into the HTML (rather than being injected via JS) changes length == 1, and allows me to access that single element, leading me to believe that accessing injected elements via the DOM is the problem (for this method)
Trying to get the objects with document.getElementById('teams').childNodes[i] returns undefined.
thank you for any help!
not sure why this would fail, i tried it in several ways and it all works
http://www.jsfiddle.net/M7zLG/ test case along with html markup
here is the source that works for local refernece, using the native built-in .serialize method as well as a custom one that walks the dom and gets a custom attribute rel, which can be your DB IDs in their new order (I tend to do that)
var order = []; // global
var sort = new Sortables('.teams', {
handle: '.drag-handle',
clone: true,
onStart: function(el) {
el.fade('hide');
},
onComplete: function(el) {
//go go gadget go
order = this.serialize();
}
});
var mySerialize = function(parentEl) {
var myIds = [];
parentEl.getElements("li").each(function(el) {
myIds.push(el.get("rel"));
});
return myIds;
};
$("saveorder").addEvents({
click: function() {
console.log(sort.serialize());
console.log(order);
console.log(mySerialize($("teams")));
}
});

How to Register custom handelbars helper in assemble 0.17.1

In my assemblefile.js I try to register a custom helper. The helper itself does work since i have it in use in a grunt project with assemble.
assemble: {
options: {
helpers: ['./src/helper/custom-helper.js' ]
}
}
In assemble 0.17.1 I tried it like this but it doesn´t work. Does anyone know how to do this?
app.helpers('./src/helper/custom-helper.js');
custom-helper.js:
module.exports.register = function (Handlebars, options, params) {
Handlebars.registerHelper('section', function(name, options) {
if (!this.sections) {
this.sections = {};
}
this.sections[name] = options.fn(this);
return null;;
});
};
assemble is built on top of the templates module now, so you can use the .helper and .helpers methods for registering helpers with assemble, which will register them with Handlebars. This link has more information on registering the helpers.
Since the templates api is used, you don't have to wrap the helpers with the .register method in your example. You can just export the helper function, then name it when registering with assemble like this:
// custom-helper.js
module.exports = function(name, options) {
if (!this.sections) {
this.sections = {};
}
this.sections[name] = options.fn(this);
return null;
};
// register with assemble
var app = assemble();
app.helper('section', require('./custom-helper.js'));
You may also export an object with helpers and register them all at once using the .helpers method:
// my-helpers.js
module.exports = {
foo: function(str) { return 'FOO: ' + str; },
bar: function(str) { return 'BAR: ' + str; },
baz: function(str) { return 'BAZ: ' + str; }
};
// register with assemble
var app = assemble();
app.helpers(require('./my-helpers.js'));
When registering the object with the .helpers method, the property keys are used for the helper names

How to replace function name with a babel plugin

Is it possible to create a babel plugin that will change some a functions name ?
I can't seems to find this in the documentation.
Example:
myObject.doSomething() ==> babel ==> myObject.___doSomething()
Thanks
Following are two different ways to do it (either with the Program visitor or with the FunctionDeclaration visitor):
export default function ({types: t}) {
return {
visitor: {
Program(path) {
path.scope.rename('doSomething', '___doSomething');
},
FunctionDeclaration(path) {
if (path.node.id.name === 'doSomething') {
path.node.id.name = '___doSomething'
}
}
}
};
}
Note that these are not safe since they can override an existing name. You can use the path.scope.generateUidIdentifier("uid"); command to generate a unique identifier and use that but you wont be able to define the generated name.
Example - http://astexplorer.net/#/o5NsNwV46z/1
You can get the AST of your code in astexplorer. And you can see it's about a CallExpression and MemberExpression. So search babel-types API in babel-types source code, it's very clear of how to create a babel type or judge a babel-type like this:
defineType("MemberExpression", {
builder: ["object", "property", "computed"],
visitor: ["object", "property"],
aliases: ["Expression", "LVal"],
fields: {
object: {
validate: assertNodeType("Expression")
},
property: {
validate(node, key, val) {
let expectedType = node.computed ? "Expression" : "Identifier";
assertNodeType(expectedType)(node, key, val);
}
},
computed: {
default: false
}
}
});

Trouble w/ Meteor Sorting

I'm trying to add a simple drop down control above a list such that I can sort it by "created" or "title".
The list template is called posts_list.html. In it's helper .js file I have:
posts: function () {
var sortCriteria = Session.get("sortCriteria") || {};
return Posts.find({},{sort: {sortCriteria: 1}});
}
Then, I have abstracted the list into another template. From here I have the following click event tracker in the helper.js
"click": function () {
// console.log(document.activeElement.id);
Session.set("sortCriteria", document.activeElement.id);
// Router.go('history');
Router.render('profile');
}
Here I can confirm that the right Sort criteria is written to the session. However, I can't make the page refresh. The collection on the visible page never re-sorts.
Frustrating. Any thoughts?
Thanks!
You can't use variables as keys in an object literal. Give this a try:
posts: function() {
var sortCriteria = Session.get('sortCriteria');
var options = {};
if (sortCriteria) {
options.sort = {};
options.sort[sortCriteria] = 1;
}
return Posts.find({}, options);
}
Also see the "Variables as keys" section of common mistakes.
thanks so much for that. Note I've left commented out code below to show what I pulled out. If I required a truly dynamic option, versus the simply binary below, I would have stuck w/ the "var options" approach. What I ended up going with was:
Template.postList.helpers({
posts: function () {
//var options = {};
if (Session.get("post-list-sort")) {
/*options.sort = {};
if (Session.get("post-list-sort") == "Asc") {
options.sort['created'] = 1;
} else {
options.sort['created'] = -1;
}*/
//return hunts.find({}, options);}
console.log(Session.get("hunt-list-sort"));
if (Session.get("hunt-list-sort") == "Asc") {
return Hunts.find({}, {sort: {title: 1}});
}
else {
return Hunts.find({}, {sort: {title: -1}});
};
}
}
});

Word generator algorithm?

I'm new to the site. would like some help if at all possible.
I would like an algorithm that calculates a list of words after you input letters available and word length. I am adding a Draw Something solution section to my website. I am a web developer, vast knowledge of XHTML, CSS and some JS but thats all, I don't think this can be done without the use of something more powerful such as python or C++?
In javascript, runnable in your browser:
vocabulary = ['start', 'tarts', 'stars', 'rats', 'tears'] // ...etc. read from a file
function letters(word) {
return word.split('');
}
function possibleWords(length, allowedLetters) {
var isAllowedLetter = function(letter) {
return allowedLetters.indexOf(letter) != -1; // allowedLetters contains letter
};
return vocabulary.filter(function(word) {
return word.length==length && letters(word).every(isAllowedLetter);
})
}
Demo:
> possibleWords(5, ['s','t','a','r'])
["start", "tarts", "stars"]
To make this more efficient, you would do:
vocabulary = ['start', 'tarts', 'stars', 'rats', 'tears'] // ...etc. read from a file
function letters(word) {
return word.split('');
}
function set(iterable) {
var data = {};
iterable.forEach(function(x) {
data[x] = true;
});
return {
contains: function(x) {
return !(data[x]===undefined);
}
};
}
function possibleWords(length, allowedLetters) {
var isAllowedLetter = allowedLetters.contains;
return vocabulary.filter(function(word) {
return word.length==length && letters(word).every(isAllowedLetter);
})
}
Demo:
> possibleWords(5, set(['s','t','a','r']))
["start", "tarts", "stars"]

Resources