That is the true beginning of our end.
Published
Edited
1 fork
2 stars
// 单元格运行时将显示 23
2 + 3 * 7
// 多条语句的代码需要使用 {} 包起来
// 单元格运行时将显示代码块最后返回的结果：5050
{
let sum = 0;
for (let i = 0; i < 100; i++) {
sum += i;
}
return sum;
}
color = "red"
md`My favorite color is **${color}**.`
md`
* 单元格可以生成和返回 DOM 元素
简单地说，因为单元格可以执行 JavaScript 代码，所以当然可以在单元格中使用 JavaScript 代码来创建 DOM 元素并返回 DOM 元素；这个时候，单元格的视图就会渲染返回的 DOM 元素，如：
`
{
const div = document.createElement('div');
div.appendChild(document.createTextNode('My favirate color is '));
const span = document.createElement('span');
span.setAttribute('style', `color: ${color}`);
span.appendChild(document.createTextNode(`${color}.`));
div.appendChild(span);
return div;
}
html`<div>My favirate color is <span style="color: ${color}">${color}</span>.`
md`My favorite color is **${color}**.`
new Promise(resolve => {
setTimeout(() => {
resolve('Resolve from Promise');
}, 3000);
})
new Promise((resolve, reject) => {
setTimeout(() => {
reject('Rejected from Promise');
}, 3000)
})
c = {
let cnt = 0;
while(cnt <= 100) {
yield cnt;
cnt += 1;
}
}
viewof input = html`<input type=range></input>`
input
input2 = html`<input type=range></input>`
input2.value
md`## 在 Observable 中实现组件
知道了viewof的使用后，其实就可以在 Observable 中实现组件化的视图了。
`
slider = {
return function(props) {
const {min = 0, max = 100, initialValue = 50, step = 1, prefix = '', suffix = ''} = props;
const container = document.createElement('div');
const prefixNode = document.createElement('span');
const suffixNode = document.createElement('span');
const inputNode = document.createElement('input');
suffixNode.appendChild(document.createTextNode(suffix));
prefixNode.appendChild(document.createTextNode(prefix));
inputNode.setAttribute('type', 'range');
inputNode.setAttribute('min', min);
inputNode.setAttribute('max', max);
inputNode.setAttribute('step', step);
inputNode.setAttribute('value', initialValue);
container.appendChild(prefixNode);
container.appendChild(inputNode);
container.appendChild(suffixNode);
// 设置视图的初始值
container.value = Number(initialValue);
inputNode.addEventListener('input', evt => {
container.value = Number(evt.target.value);
// 视图值发生变化，发出事件
container.dispatchEvent(new CustomEvent("input"));
});
return container;
}
}
viewof cnt = slider({prefix: 'Start', suffix: 'End'})
cnt
viewof timeline = slider({prefix: '20200301', suffix: '20200330', min: 1, max: 30, initialValue: 1})
timeline
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
