can-view-modifiers v1.0.0
can-view-modifiers (DEPRECATED)
The can-view-modifiers plugin is deprecated
Use jQuery modifiers to render views
Overview
The can/view/modifiers plugin extends the jQuery view modifiers
- jQuery.fn.after
- jQuery.fn.append
- jQuery.fn.before
- jQuery.fn.html
- jQuery.fn.prepend
- jQuery.fn.replaceWith
- jQuery.fn.text
to render a can.view. When rendering a view you call the view modifier the same way as can.view with the view name or id as the first, the data as the second and the optional success callback (to load the view asynchronously) as the third parameter. For example, you can render a template from todo/todos.ejs looking like this:
<% for(var i = 0; i < this.length; i++ ){ %>
<li><%= this[i].name %></li>
<% } %>
By calling the can.prototype.jQuery.fn.html html modifier on the #todos
element like this:
can.$('#todos').html('todo/todos.ejs', [
{ name : 'First Todo' },
{ name : 'Second Todo' }
]);
Note: You always have to provide the data (second) argument to render a view, otherwise the standard jQuery modifier will be used. If you have no data to render pass an empty object:
$('#todos').html('todo/todos.ejs', {});
// Render todo/todos.ejs wit no data
Deferreds
Additionally it is also possible to pass a can.Deferred as a single parameter to any view modifier. Once
the deferred resolves the result will be rendered using that modifier. This can be used to easily request
and render static content. The following example inserts the content of content/info.html after the #todos
element:
can.$('#todos').after(can.ajax({
url : 'content/info.html'
}));
API
For API details, see src/can-view-modifiers.js
Usage
ES6 use
With StealJS, you can import this module directly in a template that is autorendered:
import plugin from 'can-view-modifiers';
CommonJS use
Use require
to load can-view-modifiers
and everything else
needed to create a template that uses can-view-modifiers
:
var plugin = require("can-view-modifiers");
AMD use
Configure the can
and jquery
paths and the can-view-modifiers
package:
<script src="require.js"></script>
<script>
require.config({
paths: {
"jquery": "node_modules/jquery/dist/jquery",
"can": "node_modules/canjs/dist/amd/can"
},
packages: [{
name: 'can-view-modifiers',
location: 'node_modules/can-view-modifiers/dist/amd',
main: 'lib/can-view-modifiers'
}]
});
require(["main-amd"], function(){});
</script>
Standalone use
Load the global
version of the plugin:
<script src='./node_modules/can-view-modifiers/dist/global/can-view-modifiers.js'></script>
Contributing
Making a Build
To make a build of the distributables into dist/
in the cloned repository run
npm install
node build
Running the tests
Tests can run in the browser by opening a webserver and visiting the test.html
page.
Automated tests that run the tests from the command line in Firefox can be run with
npm test