I want to each other reflected by calculating the input contents of the three input tags in each

Question

In the current situation, only it is reflected in two to calculate the input contents of one of the input tag

・This is only an example

・Anything is good if the input contents of the input tag is mutual reflect

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

score 0 · Accepted Answer · answered Jul 01 '16 at 09:21

The inputs in App2 do not interact properly because the App2 component is passed the result of the m.prop() — not the m.prop function itself — therefore they cannot pass their results back.

There is a problem with the logic of your functions somewhere that I couldn't find: mathematical operations are returning NaN. But then, I'm not sure what the expected logic is (with the abstract function and property names it's difficult to follow!). Good luck with that!

I found it difficult to follow the flow of data and assignments, so took the liberty of refactoring your code slightly: rather than assigning the m.prop to objects and querying those properties by name in the views, the prop is passed directly. I also have it the same name — value everywhere to avoid confusion. Obviously this may not be appropriate when your application needs to deal with more data points, but I found it easier to reason about this specific example with these simplifications:

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)

For example, possible to cross-convert the binary and decimal? .. After I enter a binary number to one of the input tag , conversion to decimal. After I enter the decimal to the other of the input tag, conversion to binary number — re9, Jul 03 '16 at 02:02

I want to each other reflected by calculating the input contents of the three input tags in each

1 Answers1