我想通过计算每个input标签中的三个input标签的输入内容来相互反映
I want to each other reflected by calculating the input contents of the three input tags in each
目前的情况,只体现在两个计算其中一个输入标签的输入内容
・这只是一个例子
・输入标签的输入内容互反就好了
<div id="target"></div>
<script src="mithril.min.js"></script>
<script>
var App = {
controller: function() {
return {
temp: m.prop(10)
}
},
view: function(ctrl) {
return m("div", [
m("input", {onchange: m.withAttr("value", ctrl.temp), value: ctrl.temp()}),
m.component(App2, {value: ctrl.temp()}),
]);
}
};
var App2 = {
controller: function() {
return {
m1: function ( param ) {
return {'a': parseInt(param)+1, 'b': parseInt(param)+2, 'c': parseInt(param)+3};
},
m2: function ( param ) {
m2Obj = this.m1(param);
return {'d': parseInt(m2Obj['a'])+4, 'e': parseInt(m2Obj['b'])+5, 'f': parseInt(m2Obj['c'])+6};
}
}
},
view: function(ctrl, args) {
return m('div',
m("input", {onchange: m.withAttr("value", ctrl.m1(args.value)), value: ctrl.m1(args.value)['a']+","+ctrl.m1(args.value)['b']+","+ctrl.m1(args.value)['c']}),
m("input", {onchange: m.withAttr("value", ctrl.m2), value: ctrl.m2(args.value)['d']+","+ctrl.m2(args.value)['e']+","+ctrl.m2(args.value)['f']})
);
}
};
m.mount(target, App)
</script>
App2
中的输入无法正常交互,因为 App2
组件传递的是 m.prop()
的 结果 — 而不是 m.prop
函数本身——因此他们不能传回他们的结果。
你的函数逻辑在某处我找不到:数学运算正在返回 NaN
。但是,我不确定预期的逻辑是什么(使用抽象函数和 属性 名称很难理解!)。祝你好运!
我发现很难遵循数据和分配的流程,因此冒昧地稍微重构了您的代码:与其将 m.prop
分配给对象并在视图中按名称查询这些属性,不如将prop 直接传递。我也有相同的名称 - value
到处都是以避免混淆。显然,当您的应用程序需要处理更多数据点时,这可能不合适,但我发现通过这些简化更容易推理这个特定示例:
var App = {
controller: function() {
return m.prop(10)
},
view: function(value) {
return m("div",
m("input", {
onchange: m.withAttr("value", value),
value: value()
}),
m(App2, value)
)
}
}
var App2 = {
controller: function() {
return {
m1: function ( value ) {
return {
a: parseInt(value)+1,
b: parseInt(value)+2,
c: parseInt(value)+3
}
},
m2: function ( value ) {
m2Obj = this.m1(value)
return {
d: parseInt(m2Obj.a)+4,
e: parseInt(m2Obj.b)+5,
f: parseInt(m2Obj.c)+6
}
}
}
},
view: function(ctrl, value) {
return m('div',
m("input", {
onchange: m.withAttr("value", value(ctrl.m1(value()))),
value:
ctrl.m1(value()).a+","
+ctrl.m1(value()).b+","
+ctrl.m1(value()).c
}),
m("input", {
onchange: m.withAttr("value", value(ctrl.m2)),
value:
ctrl.m2(value()).d+","
+ctrl.m2(value()).e+","
+ctrl.m2(value()).f
})
)
}
}
m.mount(document.body, App)
目前的情况,只体现在两个计算其中一个输入标签的输入内容
・这只是一个例子
・输入标签的输入内容互反就好了
<div id="target"></div>
<script src="mithril.min.js"></script>
<script>
var App = {
controller: function() {
return {
temp: m.prop(10)
}
},
view: function(ctrl) {
return m("div", [
m("input", {onchange: m.withAttr("value", ctrl.temp), value: ctrl.temp()}),
m.component(App2, {value: ctrl.temp()}),
]);
}
};
var App2 = {
controller: function() {
return {
m1: function ( param ) {
return {'a': parseInt(param)+1, 'b': parseInt(param)+2, 'c': parseInt(param)+3};
},
m2: function ( param ) {
m2Obj = this.m1(param);
return {'d': parseInt(m2Obj['a'])+4, 'e': parseInt(m2Obj['b'])+5, 'f': parseInt(m2Obj['c'])+6};
}
}
},
view: function(ctrl, args) {
return m('div',
m("input", {onchange: m.withAttr("value", ctrl.m1(args.value)), value: ctrl.m1(args.value)['a']+","+ctrl.m1(args.value)['b']+","+ctrl.m1(args.value)['c']}),
m("input", {onchange: m.withAttr("value", ctrl.m2), value: ctrl.m2(args.value)['d']+","+ctrl.m2(args.value)['e']+","+ctrl.m2(args.value)['f']})
);
}
};
m.mount(target, App)
</script>
App2
中的输入无法正常交互,因为 App2
组件传递的是 m.prop()
的 结果 — 而不是 m.prop
函数本身——因此他们不能传回他们的结果。
你的函数逻辑在某处我找不到:数学运算正在返回 NaN
。但是,我不确定预期的逻辑是什么(使用抽象函数和 属性 名称很难理解!)。祝你好运!
我发现很难遵循数据和分配的流程,因此冒昧地稍微重构了您的代码:与其将 m.prop
分配给对象并在视图中按名称查询这些属性,不如将prop 直接传递。我也有相同的名称 - value
到处都是以避免混淆。显然,当您的应用程序需要处理更多数据点时,这可能不合适,但我发现通过这些简化更容易推理这个特定示例:
var App = {
controller: function() {
return m.prop(10)
},
view: function(value) {
return m("div",
m("input", {
onchange: m.withAttr("value", value),
value: value()
}),
m(App2, value)
)
}
}
var App2 = {
controller: function() {
return {
m1: function ( value ) {
return {
a: parseInt(value)+1,
b: parseInt(value)+2,
c: parseInt(value)+3
}
},
m2: function ( value ) {
m2Obj = this.m1(value)
return {
d: parseInt(m2Obj.a)+4,
e: parseInt(m2Obj.b)+5,
f: parseInt(m2Obj.c)+6
}
}
}
},
view: function(ctrl, value) {
return m('div',
m("input", {
onchange: m.withAttr("value", value(ctrl.m1(value()))),
value:
ctrl.m1(value()).a+","
+ctrl.m1(value()).b+","
+ctrl.m1(value()).c
}),
m("input", {
onchange: m.withAttr("value", value(ctrl.m2)),
value:
ctrl.m2(value()).d+","
+ctrl.m2(value()).e+","
+ctrl.m2(value()).f
})
)
}
}
m.mount(document.body, App)