tmpvar / weld Goto Github PK
View Code? Open in Web Editor NEWTemplate antimatter for Node.js (Browsers too!)
Template antimatter for Node.js (Browsers too!)
Hello, I figure this might be the best place to start this discussion:
I'm interested in using weld server side within ruby on rails.
Has there already been an effort to make this work?
There are a few other javascript based projects running nicely in rails (for example: https://github.com/cowboyd/handlebars.rb).
However, this is a little trickier with Weld because it requires a DOM implementation.
Here's what I've tried:
map
and alias
. most of the code is here: https://github.com/amiel/weld-rails-prototype/blob/master/config/initializers/weld_handler.rb Look in app/views/test and app/controllers to see how it is used.)Anyway, I will probably continue working on the execjs implementation, but I was wondering if anyone else was working on this. Also, I think ideally the implementation would use therubyracer instead of execjs and node and therefore would not depend on node and would have the added benefit of being able to write rendering logic in ruby.
Thoughts,
-Amiel
What's the best practice for welding links? I really don't want to use string concatenation, anywhere.
I'd to generate: 'hello' from JSON.
This is important for rendering a first round page on the server and then on the browser re-rendering using new data (append instead of overwrite)
I pretty much wrote everything in a gist:
no sure why, but the parent[method](which is by default 'append', see line 76 in weld.js) simply overwrites all child nodes of a target node. (See failing test: template_append)
Successive welding on the same collection (possibly an edge case), creates the correct number of elements in the correct order, but the data looks wrong.
opening here, as the latest jsdom bugs show all memory leaks should be fixed with current version and jquery 1.4.3. feel free to close if this is not the case:
var fs = require('fs');
var jsdom = require('jsdom');
var html = fs.readFileSync(__dirname + "/test.html", 'utf8');
for (var i = 0; i < 1000; i++) {
jsdom.env(html, [
__dirname + '/jquery.js',
__dirname + '/weld.js'
],
function(error, window) {
var $ = window.jQuery;
var data = {
"name": "Test",
"data": "hello"
};
$("#test").weld(data);
console.log($("#test").html());
});
}
by iteration 1000, my oom killer kicks in, ymmv.
If the data set contains an array with an empty string as the first element, it doesnt behave as expected.
This is due to the way weld detects arrays (cf line 198).
A simple fix would be to have at line 198:
} else if (value.length && typeof value[0] !== 'undefined') {
instead of
} else if (value.length && value[0]) {
If the key:value object contains pairs that cannot be matched in the DOM it fails.
Ie: Used in an app with multiple documents and different matchings for each document the data object can only contain keys that can be matched in the present document. The data object must therefore be split into multiple objects, one for each document.
There should be a way for Weld to gracefully ignore keys not matching.
I'm trying to use weld with Spine ( http://spinejs.com/). Spine apps are built with Hem. What is Hem?
"Hem is a dependency management tool for JavaScript Web apps; you can think of it as Bundler for Web Apps, resolving all the dependencies and compiling your application up to be served to clients.
...
Hem will recursively resolve any external Node modules your code references. This means that Spine, jQuery etc, can all be external Node modules..."
This is what I think is happening. When I add require('weld'), hem processes the weld code and finds the _ require('tty')_ call. Then it tries to solve the dependency by trying to find the module and parse the file. That's when it fails with: "Cannot find module: tty.", since tty is built-in, I guess.
I'm not sure whether Weld or Hem is the place to fix this. Is detecting nodejs even used for anything except debugging? Maybe a setting to enable/disable node or browser debugging would be a better solution?
When using weld-min.js with RequireJS the error:
Uncaught Error: Module name "tty" has not been loaded yet for context: _. Use require([])
...popped up. I used weld.js instead, no error. This is a client side issue.
This is the error
Error: No wrapper for core module tty
at EventEmitter.require (/Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:321:19)
at /Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:407:14
at Array.forEach (native)
at EventEmitter.require (/Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:406:27)
at /Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:407:14
at Array.forEach (native)
at EventEmitter.require (/Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:406:27)
at /Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:407:14
at Array.forEach (native)
at EventEmitter.require (/Users/jvduf/Work/Nodejitsu/flatiron/formroller/node_modules/browserify/lib/wrap.js:406:27)
diff --git a/README.md b/README.md
index 2c8e215..9dcc3a1 100644
--- a/README.md
+++ b/README.md
@@ -72,8 +72,8 @@ Create a DOM, load a library, read a file and bind the data to it...
window.jQuery = $;
- var data = [{ name: "hij1nx", title : "code slayer" },
- { name: "tmpvar", title : "code pimp" }];
+ var data = [{ name: 'hij1nx', title : 'code slayer' },
+ { name: 'tmpvar', title : 'code pimp' }];
$('.contact').weld(data);
});
I would like to have a nested structure which repeats containers (e.g. months) and nests other items inside (e.g. activities).
I've been playing with the code but haven't figured out how to do this. Is this possible. Is this a valid case or is there perhaps a better way to achieve the same result?
[{'month' : 'May', 'activities' : [{'name' : 'A'}] },
{'month' : 'June', 'activities' : [{'name' : 'B'}, {'name' : 'C'}] },
{'month' : 'July', 'activities' : [{'name' : 'D'}, {'name' : 'E'}] }]
<div class="month">
<div class="name">Dummy Activity 1</div>
<div class="name">Dummy Activity 2</div>
<div class="name">Dummy Activity 3</div>
</div>
<div class="month">
<div class="name">Dummy Activity 4</div>
</div>
The jQuery plugin shouldn't be limited to the first element in the element collection this[0]
. Instead the selector should limit the targeted elements.
$.fn.weld = function (data, config) {
return this.each (function () {
weld(this, data, config);
});
};
When inserting data into a page, numeric values do not show up unless I convert them to strings first. I'm using Weld 0.2.0 on Node.js 0.4.4.
weld might be slower
It would be nice to add some visual hints that the user can hover over and see what weld was doing.
This page needs to clearly show the different parts of various weld operations
Not sure if this has been asked before, but I couldn't find anything related to my question.
When a page loads I'm pulling a json file with ten rows from the database, these rows are then welded to a table. When the user clicks on a 'load more' button, another ten rows will be loaded through ajax.
These rows need to be welded to the same table, but without overwriting existing rows. Is there a way to append new data?
npm WARN [email protected] package.json: 'contributers' should probably be 'contributors'
Gotta love typos.
Should be changed to contributors
https://github.com/hij1nx/weld/blob/master/package.json#L7
Have an amazing weekend!
D
If Weld is used for inserting strings on a page that have targets for insertion that occur more than once it will ignore all but the first. This is seen especially when using Weld as a dynamic translation engine. Often a page can hold the same strings at different locations in the DOM. As of now Weld demands all those targets to be unique and only occur once on each page.
Example (Weld used as jQuery plugin):
<div id="panels">
<div id="settings">
<input type="text" name="name" />
<a class="lang-CANCEL"> </a><a class="lang-SUBMIT"> </a>
</div>
<div id="configuration">
<label><input type="checkbox" name="visible" /><span class="lang-SHOWNAME"> </span></label>
<a class="lang-CANCEL"> </a><a class="lang-SUBMIT"> </a>
</div>
</div>
jQuery(document).ready(function() {
$('#panels').weld({
"lang-CANCEL" : "Avbryt",
"lang-SUBMIT" : "OK",
"lang-SHOWNAME" : "Visa namnet"
});
});
The code above would leave the two <a>
-tags in the configuration
div untouched. Since matching of the keys in the Weld object is done using class names, expected would be that Weld inserted the strings on all elements with corresponding classes.
This projects looks very interesting.
I've always found templating systems to be bad hacks.
The question is how do you do conditions (if else)?
Eg. (in ejs)
<% if(person.description) { %>
<% } %>
Thanks!
I tried to integrate jquery-mobile in your sample, but without success.
Any advice how I could mobilize your demo with help of JQM?
There could be something awesome there.
Weld applied to vdom, then vdom updates actual dom.
I have this simple map function, but the parent is null while everything else is set.
map: function(parent, element, key, val) {
console.log(parent);
return true;
}
There are 11 occurrences where jQuery is used. jQuery should be removed as a dependency. A selector engine should be conditionally defined/included when there is no native query selector API. Sizzle?
If my JSON has its Strength attribute as a string:
{"id":"e18fb7c6a01bda18d97d5fd3670017d5","key":"e18fb7c6a01bda18d97d5fd3670017d5","value":{"LastName":"Katz","Address":"2407 Sawyer drive, Charlotte NC","Strength":"5","Type":"contact"}},
{"id":"e18fb7c6a01bda18d97d5fd367002092","key":"e18fb7c6a01bda18d97d5fd367002092","value":{"LastName":"Kerr","Address":"123 Fake st., such and such","Strength":"9","Type":"contact"}}
]}
then everything's fine, but if I have the Strength attribute as a number then Weld ignores it:
{"id":"e18fb7c6a01bda18d97d5fd3670017d5","key":"e18fb7c6a01bda18d97d5fd3670017d5","value":{"LastName":"Katz","Address":"2407 Sawyer drive, Charlotte NC","Strength":5,"Type":"contact"}},
{"id":"e18fb7c6a01bda18d97d5fd367002092","key":"e18fb7c6a01bda18d97d5fd367002092","value":{"LastName":"Kerr","Address":"123 Fake st., such and such","Strength":9,"Type":"contact"}}
]}
Would that be right?
Just a possible feature request on an otherwise amazing script... would it be possible to update attributes using the appropriate selectors in the bind config?
ex: weld(".entries .entry", data, { bind: { "id" : ".title[id]" } });
It would be nice, if the front page contained example of how to populate template's attribute elements.
The most common example would be "href" attribute of a link - it's likely to be dependent on data. How can i bind data to this attribute?
This is the awesome, can you give it a pretty site with more examples?
I was wondering how we can have access to row data in the map function :
weld(document.getElementById("data"), page,
{
map: function(parent, element, row) {
if (key === 'title') {
element.setAttribute('href', row.url);
element.innerText = row.title;
return true;
}
}
});
This would make more sense and allow for a more powerful templates
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.