fix order issue when trusted content is mixed with other siblings,
fix js error when child is a random object make home demo more minimalist add explanation about modules in guide
This commit is contained in:
parent
c7d6b40575
commit
c980fd9b66
7 changed files with 51 additions and 9 deletions
|
|
@ -204,6 +204,7 @@ module.exports = function(grunt) {
|
||||||
grunt.loadNpmTasks('grunt-saucelabs');
|
grunt.loadNpmTasks('grunt-saucelabs');
|
||||||
|
|
||||||
grunt.registerTask("build", ["test", "uglify", "zip", "md2html", "replace", "copy", "clean"]);
|
grunt.registerTask("build", ["test", "uglify", "zip", "md2html", "replace", "copy", "clean"]);
|
||||||
|
grunt.registerTask("testall", ["test", "teste2e"]);
|
||||||
grunt.registerTask("test", ["concat", "execute"]);
|
grunt.registerTask("test", ["concat", "execute"]);
|
||||||
grunt.registerTask('teste2e', ['connect', 'qunit']);
|
grunt.registerTask('teste2e', ['connect', 'qunit']);
|
||||||
grunt.registerTask("default", ["build"]);
|
grunt.registerTask("default", ["build"]);
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,20 @@ In Mithril, an application typically lives in a namespace and contains modules.
|
||||||
|
|
||||||
For simplicity, our application will have only one module, and we're going to use it as the namespace for our application.
|
For simplicity, our application will have only one module, and we're going to use it as the namespace for our application.
|
||||||
|
|
||||||
|
In Mithril, a *module* is an object that contains two functions: `controller` and `view`.
|
||||||
|
|
||||||
|
```
|
||||||
|
//an empty Mithril module
|
||||||
|
var myModule = {
|
||||||
|
controller: function() {},
|
||||||
|
view: function() {}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
In addition to holding a controller and a view, a module is typically also used to store data that pertains to it.
|
||||||
|
|
||||||
|
Let's create a module.
|
||||||
|
|
||||||
```markup
|
```markup
|
||||||
<script>
|
<script>
|
||||||
//this application only has one module: todo
|
//this application only has one module: todo
|
||||||
|
|
@ -44,7 +58,7 @@ var todo = {};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
This object will namespace our two Model classes:
|
Typically, model entities are reusable and live outside of modules (e.g. `var User = ...`). In our example, since the whole application lives in one module, we're going to use the module as a namespace for our model entities.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var todo = {};
|
var todo = {};
|
||||||
|
|
|
||||||
|
|
@ -77,14 +77,13 @@
|
||||||
<h2>Sample code</h2>
|
<h2>Sample code</h2>
|
||||||
|
|
||||||
<pre><code class="language-javascript">//namespace
|
<pre><code class="language-javascript">//namespace
|
||||||
var app = {};
|
|
||||||
|
|
||||||
//model
|
//model
|
||||||
app.PageList = function() {
|
var PageList = function() {
|
||||||
return m.request({method: "GET", url: "pages.json"});
|
return m.request({method: "GET", url: "pages.json"});
|
||||||
};
|
};
|
||||||
|
|
||||||
//controller
|
//controller
|
||||||
|
var app = {};
|
||||||
app.controller = function() {
|
app.controller = function() {
|
||||||
this.pages = app.PageList();
|
this.pages = app.PageList();
|
||||||
|
|
||||||
|
|
|
||||||
10
mithril.js
10
mithril.js
|
|
@ -170,7 +170,13 @@ Mithril = m = new function app(window, undefined) {
|
||||||
var item = build(parentElement, parentTag, cached, index, data[i], cached[cacheCount], shouldReattach, index + subArrayCount || subArrayCount, editable, namespace, configs)
|
var item = build(parentElement, parentTag, cached, index, data[i], cached[cacheCount], shouldReattach, index + subArrayCount || subArrayCount, editable, namespace, configs)
|
||||||
if (item === undefined) continue
|
if (item === undefined) continue
|
||||||
if (!item.nodes.intact) intact = false
|
if (!item.nodes.intact) intact = false
|
||||||
subArrayCount += isArr(item) ? item.length : 1
|
if (item.$trusted) {
|
||||||
|
//fix offset of next element if item was a trusted string w/ more than one html element
|
||||||
|
//the first clause in the regexp matches elements
|
||||||
|
//the second clause (after the pipe) matches text nodes
|
||||||
|
subArrayCount += (item.match(/<[^\/]|\>\s*[^<]/g) || []).length
|
||||||
|
}
|
||||||
|
else subArrayCount += isArr(item) ? item.length : 1
|
||||||
cached[cacheCount++] = item
|
cached[cacheCount++] = item
|
||||||
}
|
}
|
||||||
if (!intact) {
|
if (!intact) {
|
||||||
|
|
@ -194,6 +200,8 @@ Mithril = m = new function app(window, undefined) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (data != null && dataType == sObj) {
|
else if (data != null && dataType == sObj) {
|
||||||
|
if (!data.attrs) data.attrs = {}
|
||||||
|
if (!cached.attrs) cached.attrs = {}
|
||||||
//if an element is different enough from the one in cache, recreate it
|
//if an element is different enough from the one in cache, recreate it
|
||||||
if (data.tag != cached.tag || Object.keys(data.attrs).join() != Object.keys(cached.attrs).join() || data.attrs.id != cached.attrs.id) {
|
if (data.tag != cached.tag || Object.keys(data.attrs).join() != Object.keys(cached.attrs).join() || data.attrs.id != cached.attrs.id) {
|
||||||
clear(cached.nodes)
|
clear(cached.nodes)
|
||||||
|
|
|
||||||
|
|
@ -396,3 +396,15 @@ test('issue278 regression', function() {
|
||||||
|
|
||||||
equal(selected, 2)
|
equal(selected, 2)
|
||||||
})
|
})
|
||||||
|
test("mixing trusted content", function() {
|
||||||
|
m.render(dummyEl, [m.trust("<p>1</p><p>2</p>"), m("i", "foo")])
|
||||||
|
equal(dummyEl.childNodes[2].nodeName, "I")
|
||||||
|
})
|
||||||
|
test("mixing trusted content w/ text nodes", function() {
|
||||||
|
m.render(dummyEl, [m.trust("<p>1</p>123<p>2</p>"), m("i", "foo")])
|
||||||
|
equal(dummyEl.childNodes[3].nodeName, "I")
|
||||||
|
})
|
||||||
|
test("mixing trusted content w/ td", function() {
|
||||||
|
m.render(dummyEl, [m.trust("<td>1</td><td>2</td>"), m("i", "foo")])
|
||||||
|
equal(dummyEl.childNodes[1].nodeName, "I")
|
||||||
|
})
|
||||||
|
|
|
||||||
|
|
@ -775,6 +775,11 @@ function testMithril(mock) {
|
||||||
m.render(root, new Field())
|
m.render(root, new Field())
|
||||||
return root.childNodes.length == 1
|
return root.childNodes.length == 1
|
||||||
})
|
})
|
||||||
|
test(function() {
|
||||||
|
var root = mock.document.createElement("div")
|
||||||
|
m.render(root, {foo: 123})
|
||||||
|
return root.childNodes.length == 0
|
||||||
|
})
|
||||||
//end m.render
|
//end m.render
|
||||||
|
|
||||||
//m.redraw
|
//m.redraw
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
//make "use strict" and nodejs happy
|
||||||
|
var window = this
|
||||||
|
|
||||||
//test reporting for saucelabs
|
//test reporting for saucelabs
|
||||||
if (typeof window != "undefined") {
|
if (typeof window != "undefined") {
|
||||||
window.global_test_results = {
|
window.global_test_results = {
|
||||||
|
|
@ -19,7 +22,7 @@ function test(condition) {
|
||||||
var result = true
|
var result = true
|
||||||
test.total++
|
test.total++
|
||||||
|
|
||||||
if (this.performance != null && performance.now) {
|
if (typeof performance != "undefined" && performance.now) {
|
||||||
start = performance.now()
|
start = performance.now()
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
|
|
@ -30,11 +33,11 @@ function test(condition) {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
test.failures.push(condition)
|
test.failures.push(condition)
|
||||||
}
|
}
|
||||||
if (this.performance != null && performance.now) {
|
if (typeof performance != "undefined" && performance.now) {
|
||||||
duration = performance.now() - start
|
duration = performance.now() - start
|
||||||
}
|
}
|
||||||
|
|
||||||
test_obj = {
|
window.test_obj = {
|
||||||
name: "" + test.total,
|
name: "" + test.total,
|
||||||
result: result,
|
result: result,
|
||||||
duration: duration
|
duration: duration
|
||||||
|
|
@ -42,7 +45,7 @@ function test(condition) {
|
||||||
|
|
||||||
if (typeof window != "undefined") {
|
if (typeof window != "undefined") {
|
||||||
if (!result) {
|
if (!result) {
|
||||||
window.global_test_results.tests.push(test_obj)
|
window.global_test_results.tests.push(window.test_obj)
|
||||||
}
|
}
|
||||||
|
|
||||||
window.global_test_results.duration += duration
|
window.global_test_results.duration += duration
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue