个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我对 Mithril.js 中组件的组成方式感到困惑。在下面的示例中，我创建了一个按钮组件，用于保存按钮点击次数的私有(private)计数。如果我将两个这样的组件(下面的按钮 1 和 2)分别安装到两个安装点(下面的“m1”和“m2”)，我可以分别正确地初始化和增加按钮点击次数。
但是，如果我将两个按钮组件(下面的按钮 3 和 4)包装在一个较大的组件内，并将该包装组件安装到安装点(“m3”)，则按钮点击次数根本不会增加。这里出了什么问题以及如何修复它？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/mithril/mithril.js"></script>
</head>
<body>
<h1>This works:</h1>
<div id="m1"></div>
<div id="m2"></div>
<h1>This doesn't work:</h1>
<div id="m3"></div>
<script>
// The factory method to generate a button component
function createButton(options) {
let {title, count} = options;
return {view: () => [
m("span", title),
m("button", {onclick: function() {count++}}, count + " clicks"),
]};
};
(function() {
// this works
m.mount(document.getElementById("m1"), createButton({title: "button 1 ", count: 0}));
m.mount(document.getElementById("m2"), createButton({title: "button 2 ", count: 10}));
// this doesn't work
m.mount(document.getElementById("m3"), {view: () => [
m("div", [m(createButton({title: "button 3 ", count: 0}))]),
m("div", [m(createButton({title: "button 4 ", count: 10}))]),
]});
})();
</script>
</body>
</html>
最佳答案
第二个版本是在每次重绘时创建一个具有全新参数的全新组件，因此每次事件时都会删除 count 值。
如果你改用 Mithril 的closure components它会满足您的需求。
// Button closure component
function createButton(vnode) {
let {title, count} = vnode.attrs;
return {
view: () => [
m("span", title),
m("button", {onclick: function() {count++}}, count + " clicks"),
]
};
};
(function() {
m.mount(document.getElementById("m3"), {view: () => [
m("div", [m(createButton, {title: "button 3 ", count: 0})]),
m("div", [m(createButton, {title: "button 4 ", count: 10})]),
]});
})();
关于javascript - Mithril 组件组合中单独单击增量按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47406721/
24
4
0
我正在写一个简单的 Mithril 组件，下面是代码 var m = require("mithril") var MyComponent = { view() { retur
如果我的页面上有 10 个 m.module，我可以调用 m.startComputation、m.endComputation、 m.redraw 或 m.request 仅用于其中一个模块？ 看起
只是尝试在没有 webpack 和 npm 的情况下使用 JSX 做一个简单的示例。 var MyComponent = {
我正在尝试向页面中的某些元素添加自定义上下文菜单 它在包含表格的 View 中是这样的。上下文菜单附加到 名称为“S”的表头: list.view = function(ctrl, args) { v
我正在使用 Mithril 编写单页应用程序。该页面在主要组件的 oninit 中使用 m.request() 从服务器加载一些数据: var root = document.getElementBy
我是 Mithril JS 框架的新手，我喜欢它的渲染性能。轻量级是一个优点，但我想使用 jQuery UI，这样我就可以从它的一些功能中受益，例如可拖动的交互。据我了解，jQuery UI 和 Mi
没有事件捕获吗？我想强制事件处理顺序，在自动完成组件中， onblur 事件在 onclick 列表中的项目之前触发，导致列表切换两次，因此在闪烁后保持可见。 最佳答案 Mithril 中的事件绑定(
我对 Mithril.js 中组件的组成方式感到困惑。在下面的示例中，我创建了一个按钮组件，用于保存按钮点击次数的私有(private)计数。如果我将两个这样的组件(下面的按钮 1 和 2)分别安装到
我正试图完成这里发生的确切事情:https://arthurclemens.github.io/mithril-template-converter/index.html 基本上，我让用户将一个 HT
我正在使用 Mithril 0.2.2-rc.1。我在 routing documentation 中看到:路由是一个允许创建单页应用程序 (SPA) 的系统，即可以从一个页面转到另一个页面的应用程序
我正在使用 Mithril 组件构建仪表板。仪表板由通用小部件组件组成，这些小部件嵌套更具体的组件，例如 Twitter 小部件、销售小部件等。通用小部件与嵌套组件无关。 现在我需要补充嵌套组件中的通
在我的延迟对象带着数据返回后，我试图重新渲染我的 DOM elemnet。我在控制台上对此进行调试，似乎我的元素正在创建，但它从未显示在页面上。如果我添加静态内容，它就会按预期工作。
你能帮忙处理 Mithril 吗？再次？ :) 在此组件中，我想显示一些数据，但 m() 没有显示任何内容，但数据不为空。非常感谢 var default_panel_component = {
我在这里有一个不同的跨组件通信实现 http://jsfiddle.net/c641oog2/比这里描述的要多:http://lhorie.github.io/mithril/components.h
有没有一种简单的方法可以用 Mithril 来处理这种数据？ [ {"type" : "folder", "name" : "Folder1", "childs" : [ {"type": "fi
我正在使用 Mithril.js 创建我的个人网站/博客作为单页应用程序。我网站上的所有页面和博文都是使用 Page 和 Post 组件呈现的，并且根据 :slug 加载正确的页面网址。 我遇到的问题
使用 JavaScript 框架 Mithril，我尝试在创建和渲染初始主体之后添加新元素。 这是我最基本的问题: let divArray = []; let newDivButton = m('b
我正在尝试使用 CodeIgniter 通过 ajax 和 Mithril.js 发送 POST 请求。但由于某种原因，输入总是为空。我尝试过使用常规的 ajax post 请求，效果很好，但 Mit
我尝试在互联网上进行大量搜索，但找不到一个简单问题的答案。我对 Mithril 非常陌生(不知道为什么人们为项目选择 Mithril :()。我想迭代字符串列表并在带有复选框的下拉列表中使用它的值。
我是 Mithril JS 框架的新手，正在尝试将 Mitril View 与 angularJS 集成。有人尝试过吗？ 我想检查如何将 Angular Controller 方法绑定(bind)到
我是一名优秀的程序员,十分优秀！