tmpvar / weld Goto Github PK

Should be changed to contributors
https://github.com/hij1nx/weld/blob/master/package.json#L7

Have an amazing weekend!
D

This page needs to clearly show the different parts of various weld operations

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)

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]) {

npm WARN [email protected] package.json: 'contributers' should probably be 'contributors'

Gotta love typos.

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!

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.

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.

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.

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.

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)

I pretty much wrote everything in a gist:

https://gist.github.com/3317ed8d09600d98fda7

There could be something awesome there.

Weld applied to vdom, then vdom updates actual dom.

https://github.com/Matt-Esch/virtual-dom

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]" } });

• start (first chance)
  • matcher (string ".{name}, #{name}, :input[type={name}]")
  • match (it would be nice if this were a css selector, if possible)
  • extract (this is called when the template is cloned)
  • apply (apply data into the cloned template)
  • insert (insert the template back into the document)
• done (last chance)

It would be nice to add some visual hints that the user can hover over and see what weld was doing.

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?

@tmpvar, @hij1nx It seems like plates is/was abandoned by the nodejitsu guys.
Is it safe to say this project has reached the same fate? If so, do you mind shedding some light into why.

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?

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);
  });
};

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)

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?

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">&nbsp;</a><a class="lang-SUBMIT">&nbsp;</a>
  </div>

  <div id="configuration">
    <label><input type="checkbox" name="visible" /><span class="lang-SHOWNAME">&nbsp;</span></label>
    <a class="lang-CANCEL">&nbsp;</a><a class="lang-SUBMIT">&nbsp;</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.

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>

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:

1. therubyracer + jsdom -- couldn't get jsdom loaded correctly
2. therubyracer + domcore -- domcore stolen from sproutcore, couldn't load html directly into domcore synchronously
3. execjs (node) + jsdom -- this one actually works pretty well, the only downside is that you can't run ruby procs within javascript, which would be handy for 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.)
4. harmony + johnson + jsdom -- jsdom and weld loaded fine, but could not get rendered result from weld. I'm not sure if weld never rendered anything or if I screwed something up. Anyway, johnson doesn't work with ruby 1.9 and looks like a dying project.

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

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

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.

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.

I tried to integrate jquery-mobile in your sample, but without success.
Any advice how I could mobilize your demo with help of JQM?

This is the awesome, can you give it a pretty site with more examples?

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?

weld might be slower

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?

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;
}