Skip to content

Instantly share code, notes, and snippets.

@ika18
Created July 16, 2013 14:44
Show Gist options
  • Save ika18/563c2554c5808400f4d5 to your computer and use it in GitHub Desktop.
Save ika18/563c2554c5808400f4d5 to your computer and use it in GitHub Desktop.
The widget unweave issue on troopjs 1.0.9-8 with jquery 1.8.3
* js
* main.js
* widget
* list
* main.html
* main.js
* detail
* main.js
* main.html
* lib
* index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div data-weave="troopjs-core/route/placeholder(widget/list/main)" data-route="^list$"></div>
<div data-weave="troopjs-core/route/placeholder(widget/detail/main)" data-route="^detail"></div>
<script data-main="js/main.js" src="lib/requirejs/require.min.js"></script>
</body>
</html>
require.config({
baseUrl: 'js',
paths: {
'troopjs-bundle': '../lib//troopjs/1.0.9-8/troopjs-bundle',
'jquery': '../lib/jquery/1.8.3/jquery.min',
},
map: {
'*': {
'template': 'troopjs-requirejs/template'
}
},
waitSeconds: 30
});
require(['require',
'jquery',
'troopjs-bundle'], function (require, $) {
'use strict';
require(["troopjs-core/route/router",
"troopjs-jquery/weave",
"troopjs-jquery/destroy",
"troopjs-jquery/action",
"troopjs-jquery/resize",
"troopjs-jquery/dimensions",
"troopjs-jquery/hashchange"], function (Router) {
$(document).ready(function () {
Router($(window)).start();
$('[data-weave]').weave();
});
});
});
<p>
hello wolrd
</p>
<p>
<button data-action="back">Back</button>
</p>
define(['jquery',
'troopjs-core/component/widget',
'template!./main.html'], function ($, Widget, template) {
'use strict';
return Widget.extend({
'sig/initialize': function (signal, deferred) {
var me = this;
me.html(template, deferred);
},
'sig/stop': function (signal, deferred) {
var me = this;
me.html('');
deferred.resolve();
},
'dom/action.click': $.noop,
'dom/action/back.click': function (topic, $e, id) {
$e.preventDefault();
var me = this;
window.location.hash = 'list';
}
});
});
<ul>
<li><a href="#" data-action="detail(1)">List 1</a></li>
<li><a href="#" data-action="detail(2)">List 2</a></li>
<li><a href="#" data-action="detail(3)">List 3</a></li>
<li><a href="#" data-action="detail(4)">List 4</a></li>
</ul>
define(['jquery',
'troopjs-core/component/widget',
'template!./main.html'], function ($, Widget, template) {
'use strict';
return Widget.extend({
'sig/initialize': function (signal, deferred) {
var me = this;
me.html(template, deferred);
},
'sig/stop': function (signal, deferred) {
var me = this;
me.html('');
deferred.resolve();
},
'dom/action.click': $.noop,
'dom/action/detail.click': function (topic, $e, id) {
$e.preventDefault();
var me = this;
window.location.hash = 'detail?' + id;
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment