个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
在这里，我试图更新文档以包含许多元素，并且我正在逐步删除这些元素。我尝试了两种方法，一种不涉及创建 m-objects，另一种是我在每个 m.render() 上创建新的 。我在程序中使用了第一种方法，但它不起作用，所以我决定测试 Mithril 并发现了这种行为。m-objects
这不起作用:
e1 = m('i', 'e1');
e2 = m('i', 'e2');
e3 = m('i', 'e3');
m.render(document.body, m('b', [e1, e2, e3]));
// "e1e2e3" appears
m.render(document.body, m('b', [e2, e3]));
// "e2e3" appears
m.render(document.body, m('b', [e3]));
// "e2e3" appears
m.render(document.body, m('b', []));
// "e2e3" appears
有趣的是，如果我从末尾删除项目，它会起作用:
e1 = m('i', 'e1');
e2 = m('i', 'e2');
e3 = m('i', 'e3');
m.render(document.body, m('b', [e1, e2, e3]));
// "e1e2e3" appears
m.render(document.body, m('b', [e1, e2]));
// "e1e2" appears
m.render(document.body, m('b', [e1]));
// "e1" appears
m.render(document.body, m('b', []));
// "" appears
并且，此方法始终有效(双向):
m.render(document.body, m('b', [m('i', 'e1'), m('i', 'e2'), m('i', 'e3')]));
// "e1e2e3" appears
m.render(document.body, m('b', [m('i', 'e2'), m('i', 'e3')]));
// "e2e3" appears
m.render(document.body, m('b', [m('i', 'e3')]));
// "e3" appears
m.render(document.body, m('b', []));
// "" appears
我想我可以在程序中使用最后一个方法，但我想知道为什么原来的方法不起作用。
最佳答案
当您处理可能会更改(重新排序或添加/删除项目)的数据列表时，最好为与其呈现的数据相关的每个组件/元素设置一个键。
我不太确定 Mithril 在这里做了什么，但如果没有 key ，它就无法正确识别每次删除哪些 child 。 (从列表末尾删除时，它更常见。)
但是，只要使用正确的键，它总是有效的:
var children = [
m('i', {key: 'e1'}, 'e1'),
m('i', {key: 'e2'}, 'e2'),
m('i', {key: 'e3'}, 'e3')
];
function show() {
m.render(document.body, m('b', {onclick: removeFirst}, children));
}
function removeFirst() {
children = children.slice(1);
console.log('children', children);
show();
}
show();<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="index.js"></script>
</body>关于javascript - 当我从开头删除元素时，为什么 m.render() 不更新 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46542250/
26
4
0
我需要在每个渲染帧完成后拍摄屏幕截图，但我发现某些屏幕截图是重复的，所以我想知道是否可以在渲染完成之前保存屏幕截图。因此... renderer.render() 会阻塞直到完成渲染吗？ 如果没有，有
web.py 骨架代码中的“render._keywords['globals']['render'] = render”是什么意思？ http://webpy.org/skeleton/0.3 最佳
所以在我的 Nuxt universal-mode 应用程序中，我有时会出现错误: vue.runtime.esm.js:620 [Vue warn]: The client-side rendere
我想创建一个 portal-like effect使用 Bevy . Unity 似乎有一个 render texture实现这一目标。 有没有办法在 Bevy 中做同样的事情？如果没有， futur
我有一个看起来像这样的组件(非常简化的版本): const component = (props: PropTypes) => { const [allResultsVisible, setA
编辑:我调整了代码，但问题仍然存在。见下文 我有这个 p:selectOneRadio : 而这个 p:radioButton : 和 AData包含其
为了渲染部分我可以使用 render 'partial_name' 或 render partial: 'partial_name' 我开始知道 render 是 render partial 的简写
我注意到文章中的一些地方使用了 React.render() 和一些地方 ReactDOM.render()。这两者有什么具体区别吗？ 最佳答案 这是 0.14 中引入的最新更改。他们将 React
我的代码是这样的: function render() { renderer.render( scene, camera ); renderer.clear(); } 我想知道为什么它
我目前正在实现 useSWR 以便从我的 express 和 mongo-db 后端获取数据。我能够从数据库中成功获取数据没问题。以下是我用来实现此目的的代码: ```//SWR method for
我只有在按照 React native - "this.setState is not a function" trying to animate background color? 的建议合并了 u
所以我有一个大的纹理，被分成 64x64 block 。 我使用将其加载到 LibGDX texture = new Texture("texturemap.png"); regions = Text
我对放置 @Scripts.Render 和 @Styles.Render 的位置感到很困惑。理想情况下，我会将它们全部放在 head 部分中，但出乎意料的是，例如 @Scripts.Render("
我正在尝试使用 jamon 来收集使用 Tapestry 的网站的统计信息(呈现网页的时间)。 我怎样才能拥有 服务器收到请求时执行的方法，即渲染开始时？ 响应全部发送完毕，即渲染结束时执行的方法 ?
在我的 React 应用程序中，我想要渲染一个 prop 值，但直到渲染完成后更新 props 后它才存在。 this.props.users 是一个对象，因此我使用 Object.keys() 转换
我正在使用 React 的钩子(Hook)，我希望有一个从数据库中检索到的值作为初始值。但是，我收到以下错误: Invariant Violation: Invariant Violation: Re
我正在尝试按照以下代码将多个场景包含到单个 webgl 渲染器中: renderer.render(scene1, camera); renderer.render(scene2, camera);
我在我的 xhtml 页面中使用此代码，当我运行应用程序时，元描述仍在呈现。我想根据某些条件使用元描述标签。主布局: ..........
我正在使用react-native-render-html来渲染html。renderers方法允许我提供自定义函数来呈现特定标签。不过，我想使用源代码中的原始内部 HTML 将子组件替换为我的自定义
我有一个网格，可以渲染可变高度的卡片。 为了获取卡片的高度，我将卡片渲染在 ReactHeight 中。 ( https://github.com/nkbt/react-height )，这让我可以在
我是一名优秀的程序员,十分优秀！