Allow HTML templates/jQuery selectors in view #26

Closed
arturadib opened this Issue Jul 23, 2011 · 12 comments

Comments

Projects
None yet
10 participants
@arturadib
Owner

arturadib commented Jul 23, 2011

Lots of folks prefer to keep their HTML separate from JS. We should support that, perhaps through jQuery templates.

Or, as per suggestion of @svieira, we can let view formats to be functions, and let users decide what templating framework they want to use.

@honi

This comment has been minimized.

Show comment Hide comment
@honi

honi Jul 23, 2011

I totally agree on that. When looking through the documentation, I kept thinking: "What if I'm only developing the JS part, and another person is doing HTML/CSS?". There must be a way to separate logic code and view markup.

Making the view format accept a function is a good idea. I would personally like to do something like (using jQuery):
{
format: $('#someView')
}
Where someView is the id of some div placed in my page.

honi commented Jul 23, 2011

I totally agree on that. When looking through the documentation, I kept thinking: "What if I'm only developing the JS part, and another person is doing HTML/CSS?". There must be a way to separate logic code and view markup.

Making the view format accept a function is a good idea. I would personally like to do something like (using jQuery):
{
format: $('#someView')
}
Where someView is the id of some div placed in my page.

@beholdr

This comment has been minimized.

Show comment Hide comment
@beholdr

beholdr Jul 25, 2011

I think that possibility to use own template engine is very important. For example, I want to use DoT (https://github.com/olado/doT) template engine instead of jQuery templates — because it's much faster and simpler.

beholdr commented Jul 25, 2011

I think that possibility to use own template engine is very important. For example, I want to use DoT (https://github.com/olado/doT) template engine instead of jQuery templates — because it's much faster and simpler.

@dgarciaacosta

This comment has been minimized.

Show comment Hide comment
@dgarciaacosta

dgarciaacosta Jul 27, 2011

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.

www.handlebarsjs.com

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.

www.handlebarsjs.com

@alanhogan

This comment has been minimized.

Show comment Hide comment
@alanhogan

alanhogan Jul 29, 2011

I have used ICanHaz (which includes Mustache) before, and we like it because we can also use Mustache views on the back-end

I have used ICanHaz (which includes Mustache) before, and we like it because we can also use Mustache views on the back-end

@lucasjans

This comment has been minimized.

Show comment Hide comment
@lucasjans

lucasjans Aug 31, 2011

Along the same thought of separating separating designers from javascript developers, how about giving us the ability to define classes for our view? We can do styles, but I don't want my CSS guys fiddling with my code.

Along the same thought of separating separating designers from javascript developers, how about giving us the ability to define classes for our view? We can do styles, but I don't want my CSS guys fiddling with my code.

@tristanls

This comment has been minimized.

Show comment Hide comment
@tristanls

tristanls Aug 31, 2011

Collaborator

@agencyrevolution

You can already define classes using data-binding:

var myObj = $$( { cls: 'myClass' }, '<div data-bind="class cls"></div>' );
$$.document.append( myObj );

----

<div data-bind="class cls" class="myClass"></div>
Collaborator

tristanls commented Aug 31, 2011

@agencyrevolution

You can already define classes using data-binding:

var myObj = $$( { cls: 'myClass' }, '<div data-bind="class cls"></div>' );
$$.document.append( myObj );

----

<div data-bind="class cls" class="myClass"></div>
@tlack

This comment has been minimized.

Show comment Hide comment
@tlack

tlack Jan 20, 2012

Collaborator

Any update on this? I'd really like to use some kind of not-just-a-JS-string template for the complex app I'm working on..

Collaborator

tlack commented Jan 20, 2012

Any update on this? I'd really like to use some kind of not-just-a-JS-string template for the complex app I'm working on..

@arturadib

This comment has been minimized.

Show comment Hide comment
@arturadib

arturadib Jan 24, 2012

Owner

How about allowing the view to be defined from a jQuery object, which in turn picks the template from the DOM?

var obj = $$({}, $('#view-template'), ...);

I haven't thought too far ahead about this, but it seems doable.

@tristanls What do you think?

Owner

arturadib commented Jan 24, 2012

How about allowing the view to be defined from a jQuery object, which in turn picks the template from the DOM?

var obj = $$({}, $('#view-template'), ...);

I haven't thought too far ahead about this, but it seems doable.

@tristanls What do you think?

@jf26028

This comment has been minimized.

Show comment Hide comment
@jf26028

jf26028 Jan 24, 2012

You can use html as your templates the same way most template engines pull templates from the dom:

        window.item = $$({
            model: {},

            view: {
                format: $('#item').html() // fetch the html from the script tag in the dom.
            },
            /// etc

with this in your html

    <script id="item" type="text/html">
        <li><span data-bind="content" class="item" /><button>x</button></li>
    </script>

Actually, you could use any templating solution here. The only thing that the view wants is html.

Jesse

jf26028 commented Jan 24, 2012

You can use html as your templates the same way most template engines pull templates from the dom:

        window.item = $$({
            model: {},

            view: {
                format: $('#item').html() // fetch the html from the script tag in the dom.
            },
            /// etc

with this in your html

    <script id="item" type="text/html">
        <li><span data-bind="content" class="item" /><button>x</button></li>
    </script>

Actually, you could use any templating solution here. The only thing that the view wants is html.

Jesse

@tristanls

This comment has been minimized.

Show comment Hide comment
@tristanls

tristanls Jan 25, 2012

Collaborator

I guess we could get as clever as we want to with the jQuery selector/object mechanism. If a view format is a string and it doesn't start with < we can assume it's a jQuery selector and automatically do the $( ... ).html() on it with some sane error reporting if it turns up empty.

That way @jf26028 's code would look like

window.item = $$({
  model : {},
  view : {
    format : '#item'
  },
  /// etc
});

or in @arturadib case:

var obj = $$({}, '#view-template', ...);
Collaborator

tristanls commented Jan 25, 2012

I guess we could get as clever as we want to with the jQuery selector/object mechanism. If a view format is a string and it doesn't start with < we can assume it's a jQuery selector and automatically do the $( ... ).html() on it with some sane error reporting if it turns up empty.

That way @jf26028 's code would look like

window.item = $$({
  model : {},
  view : {
    format : '#item'
  },
  /// etc
});

or in @arturadib case:

var obj = $$({}, '#view-template', ...);
@arturadib

This comment has been minimized.

Show comment Hide comment
@arturadib

arturadib Jan 30, 2012

Owner

Yeah I think for now @jf26028's suggestion works just fine. I've updated the docs to mention that. Closing the issue for now, thanks everyone!

Owner

arturadib commented Jan 30, 2012

Yeah I think for now @jf26028's suggestion works just fine. I've updated the docs to mention that. Closing the issue for now, thanks everyone!

@arturadib arturadib closed this Jan 30, 2012

@phonovision

This comment has been minimized.

Show comment Hide comment
@phonovision

phonovision Mar 21, 2012

Am I right asuming that embedding html into script-tags is the trick?

Editors don't seem to recognize that this is possible...

Am I right asuming that embedding html into script-tags is the trick?

Editors don't seem to recognize that this is possible...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment