Live UI Blade Plugin and KnockoutJS

[nkhine]

if using Blade would it be better to use the Live UI Blade Plugging or can we use KnockoutJS?

[bminer]

It depends. :) I'd suggest trying them both out and see which one you like best.

The Live UI Blade Plugin is pretty neat because it offers live binding without any extra work. It also depends on the Spark libraries (a subset of the Meteor project). You can read the first few paragraphs of the Spark documentation to get an idea of what it does and how it works: https://github.com/meteor/meteor/wiki/Spark

Also, the documentation for the Live UI plugin is here: https://github.com/bminer/node-blade/wiki/Live-UI-Blade-Plugin and was updated today. :)

As a side note, I've never used KnockoutJS. I've read about it though, and it seems like a decent solution. Hope that helps!

[nkhine]

i tried, but had no success ;'( when i tried the LiveUI example on the wiki but get this:

Uncaught ReferenceError: clicks is not defined at guide.blade:6:5 guide.blade:25 anonymous guide.blade:25 (anonymous function) footer.js:76 l blade.js:1 u._cb.(anonymous function) blade.js:1 (anonymous function)

this is my guide.blade file:

blade._cachedViews["guide.blade"]=function anonymous(locals, cb, __) {
    __ = __ || [];
    __.r = __.r || blade.Runtime;
    if (!__.func) __.func = {}, __.blocks = {}, __.chunk = {};
    __.locals = locals || {};
    __.filename = "guide.blade";
    try {
        with (__.locals) {
            __.line = 1, __.col = 1;
            __.push("<script" + ' type="text/javascript"' + ' src="/blade/plugins/liveui.js"' + ">" + "</script>");
            __.line = 2, __.col = 1;
            __.push("<div" + ">");
            __.line = 3, __.col = 5;
            __.r.bind("click", "blade_" + __.r.ueid, function(e) {
                clicks++;
            }, __);
            __.push("<input" + ' type="button"' + ' value="Click Me"' + ' onclick="return blade.Runtime.trigger(this,arguments);"');
            __.r.attrs({
                id: {
                    v: "blade_" + __.r.ueid++
                }
            }, __);
            __.push("/>");
            __.line = 6, __.col = 5;
            var plural = clicks == 1 ? "" : "s";
            __.line = 7, __.col = 5;
            __.push("<p" + ">" + __.r.escape("You clicked the button " + __.r.escape((__.z = clicks) == null ? "" : __.z) + " time" + __.r.escape((__.z = plural) == null ? "" : __.z) + "") + "</p>" + "</div>");
        }
    } catch (e) {
        return cb(__.r.rethrow(e, __));
    }
    if (!__.inc) __.r.done(__);
    cb(null, __.join(""), __);
};if(blade._cb["guide.blade"])blade._cb["guide.blade"](".",[],false);

and in my main.js, i have, which is included into the scripts.blade file

//Define a model
var model = new blade.Model({
  "clicks": 0
});
//Render the view, passing the model along
$("body").render("guide", model);

what am i missing?

[bminer]

Hmm... instead of including the <script> tag for the Live UI plugin in your guide.blade file, try removing that and putting it in your main HTML document. Did you also get an Error like this: "TypeError: undefined is not a function?"

[nkhine]

maybe is related to the issue i have with #132 in that i call the guide.blade from jquery.on.click

[bminer]

This issue is probably not related to #132. See issue #132 for more details.

[nkhine]

i have added the <script> tag for the Live UI plugin to the head.blade

 script(type="text/javascript" src="js/vendor/underscore-min.js")
 script(type="text/javascript" src="js/vendor/spark.js")
 script(type="text/javascript" src="js/vendor/jquery/jquery.min.js")
 script(type="text/javascript" src="/blade/plugins/liveui.js")
 script(type="text/javascript" src="/blade/blade.js")

and yes, i now get:

Uncaught TypeError: Object [object Object] has no method 'render'

running it it from the Chrome consol

 > var model = new blade.Model({"clicks": 0});
 undefined
 > $("body").render("menu", model);
 TypeError: Object [object Object] has no method 'render'

is the order of the loading of the javascript files correct?

[bminer]

No, the order is off a bit. You have to load /blade/blade.js before loading the live UI plugin.

[nkhine]

i changed that, so that:

script(type="text/javascript" src="/js/vendor/modernizr-2.6.2.min.js")
script(type="text/javascript" src="js/vendor/underscore-min.js")
script(type="text/javascript" src="js/vendor/jquery/jquery.min.js")
script(type="text/javascript" src="/blade/blade.js")
script(type="text/javascript" src="js/vendor/spark.js")
script(type="text/javascript" src="/blade/plugins/liveui.js")

but still get the same Uncaught TypeError: Object [object Object] has no method 'render'

[bminer]

Hmmm... probably a problem with Spark? Could you post the full stack trace?

[nkhine]

is it possible to push a working example somewhere like on AppFog, as there is no full stack trace, only the Uncaught TypeError: Object [object Object] has no method 'render with (anonymous function)

[bminer]

Hmm... I dunno. Without some more information, I think I'm stuck on this one. I don't have a working example at this time, sorry...

Are there any other errors in the console? Perhaps a 404 error or one of the scripts not loading properly?