Knockout.js -> Semantic Markup? 3

[1DMF]

Hi,

I've just had a play with Knockout.js and on first glance it seems it could be useful.

However, walking through their online tutorial, it seems the plug-in requires you to add invalid attributes to HTML tags, not only for binding the modelview to the view, but also for onclick events?

I was under the impression that even using the onclick event attribute (and others) was considered bad practice and events should now be bound from JavaScript (such as JQuery) and not hard coded into tag attributes.

So if using semantic valid tag attributes to bind JavaScript functions to events is considered bad practice and not the correct way of doing things how can the following be acceptable?

<button data-bind="click: capitalizeLastName">Click Me</button>

Does this mean anyone who uses Knockout.js doesn't care about standards or semantics, or is the tutorial just showing the bare bone basics and this is covered somewhere else in the documentation?

Anyone have any experience with this?

Thanks,
1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[feherke]

Hi

Huh ? The custom [tt]data-[/tt] attributes are a long needed solution introduced in HTML5 and quite well supported across browsers.

In the old days we had to pollute other attributes with such custom values, usually the [tt]class[/tt] :

<[b]button[/b] class=[green][i]"click-capitalizeLastName"[/i][/green]>Click Me</[b]button[/b]>

Now that we have a dedicated mechanism, certainly the correct way is to use it.

Is absolutely standard and I can not see in it any semantic impurity.

HTML 5.1 Nightly | Semantics, structure, and APIs of HTML documents | Elements | Global attributes | Embedding custom non-visible data with the data-* attributes


Feherke.
feherke.ga

 

[jpadie]

I was under the impression that even using the onclick event attribute (and others) was considered bad practice

not 'bad' practice but it certainly makes readability and maintainability more difficult in most cases. I feel it is also less pure, not necessarily from a canonical semantic perspective (either methods are semantically acceptable), but in terms of separation of format from function.

However, as with all rules of thumb, there are reasonable exceptions to consider. Whilst I would not bind some complex anonymous function to an onclick event from within a tag, binding a named function may actually make the code more readable, particularly (like in the above case) when there may be many controls in the html and each are attached to different codesnips. Or if the code relates to the formatting of that button or some other data. I suspect that I would still err on the side of using classes and bindings but that is probably because I am old and inflexible.

 

[1DMF]

Thanks feherke / jpadie,

I was not aware of this custom data attribute, I am only just looking at HTML5, been coding X/HTML 1.0 strict for many years, and the 'HTML 5 Tag Reference - The Working Brain' crib sheet I have blue-tacked to my wall doesn't mention this attribute for the button tag.

Which is why I came here to ask the question, as I felt I must be missing something, and I was ;-)

I'm very keen to develop my skill in 'separation of concerns', and having just got my head around 'MVC', today is the first time I've heard the term 'MVVM', and I liked it, so before I went charging ahead learning this stuff, I wanted to be sure I wasn't on a fools errand!

As always, much appreciated.

1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[feherke]

Hi

the 'HTML 5 Tag Reference - The Working Brain' crib sheet I have blue-tacked to my wall doesn't mention this attribute for the button tag.

It should mention them for all tags, not just for [tt]button[/tt]. They are global attributes.


Feherke.
feherke.ga

 

[ChrisHirst]

You can add arbitrary attributes for your own use to any tag, in any HTML version, and if you want it to 'validate', which is only a "spell-check" at best, you can create your own DTD, that has been the case since HTML 3.2 (1995).
Alternatively your code could insert the attributes using javascript then the validator does not even 'see' them.

Having your own attributes for a specific use in tags is not "non-semantic" markup it's only the validators that will baulk at them, browser rendering engines will simply ignore them.

CSS rendering will happily use your "non-validated" arbitrary attribute name though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">

<head>
	<title>untitled</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.22" />
<style rel="stylesheet" type ="text/css">
	[mine] {
		color: green;
		font-weight: bold;
}
</style>
</head>

<body>
	<p mine="123">TEST text</p>
</body>

</html>

Will produce bold green text for example (even in Infernet Exploder)



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

It should mention them for all tags, not just for button. They are global attributes.

It only shows new tags in HTML5 or deprecated ones (including attributes), not global new attributes, I guess it isn't that good a crib sheet :-(

I did have a play with trying to extend the DTD for Facebook tags, but couldn't get it to work for the validators, and read many threads that said the supposed extensibility of 'X'/HTML never worked properly, so gave up with it and ignored the validation errors! - Don't know if this is true or not, but then came HTML 5 and so didn't look at the 'eXtensibility' any further.

Have any of you used Knockout.js? would you recommend something else to do the same thing?

I was going to build my own JSON type ViewModel (though I didn't know it had this name) for a project I'm working on and the interactive UI, but if there is something robust and industry standard out there already, it could save me job.



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Well it looks like it's a good choice as there is a workshop on it at DevWeek, so I'll be going to that and learning all I can

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music