Instead of showing and hiding elements by changing the DOM
directly like:
$("h1").show()
$("h1").hide()
Make the template show or hide those elements when a value
changes.
{{#if visible}}
<h1>{{message}}</h1>
{{/if}}
When the button is clicked, change the observable value.
data.attr("visible", !data.attr("visible"))
Application State
Typically, it’s not a good idea to mix view state and application data.
In the previous example, the message is application data, while the
visible property represents view state. In CanJS, state and data
should be separated using different observables.
var data = new can.Map({message: "Hello World!"}),
state = new can.Map({visible: true});
var frag = can.view("app-template", {
data: data,
state: state
});
As an application gets more complex, separating state from data
makes things more maintainable.
Instead of showing and hiding elements by changing the DOM directly like:
Make the template show or hide those elements when a value changes.
When the button is clicked, change the observable value.
Application State
Typically, it’s not a good idea to mix view state and application data. In the previous example, the
messageis application data, while thevisibleproperty represents view state. In CanJS, state and data should be separated using different observables.As an application gets more complex, separating state from data makes things more maintainable.