I miteinander durch Berechnung des Eingang Inhalte der drei Eingänge-Tags in jedem

Question

In der aktuellen Situation reflektierte will, nur ist es in zwei reflektiert den Eingang Inhalt eines des Eingangs-Tages

zu berechnen · Dies ist nur ein Beispiel

· Alles, was gut ist, wenn der Eingang Inhalt des Eingangs Tages gegenseitigen

<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> 

Answer 1

die Eingänge in App2 reflektiert interagieren nicht richtig, weil die App2 Komponente ist die Ergebnis der m.prop() - nicht die m.prop Funktion selbst übergeben - daher können sie ihre Ergebnisse nicht zurück geben.

Es gibt ein Problem mit der Logik Ihrer Funktionen, die ich nicht finden konnte: mathematische Operationen geben NaN zurück. Aber ich bin mir nicht sicher, was die erwartete Logik ist (mit den abstrakten Funktions- und Eigenschaftsnamen ist es schwer zu folgen!). Viel Glück damit!

---

Ich fand es schwierig, den Fluss von Daten und Zuordnungen zu folgen, so nahm sich die Freiheit des Codes leicht Refactoring: anstatt die m.prop auf Objekte zuweisen und diese Eigenschaften mit Namen in den Ansichten abfragt, die Requisite direkt übergeben. Ich habe es auch den gleichen Namen - value überall um Verwirrung zu vermeiden. Offensichtlich ist dies möglicherweise nicht geeignet sein, wenn Ihre Anwendung mit mehr Datenpunkte zu behandeln, aber ich fand es einfacher, dieses spezielle Beispiel mit diesen Vereinfachungen Grund, sich über:

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)