javascript - 为什么 m.module 不会导致我的视​​图在 Mithril 中重新呈现？

Question

我认为给定一个具有 controller 和 view 属性的对象，当 Controller 的状态发生变化时(或者 m.prop 属性发生变化) 它会重新呈现模板。这在我的案例中没有发生(我必须直接使用 redraw)。我在这里做错了什么？ ////////app.js

define([ 'mithril', 'propertyPane'],
  function(m, propertyPane){
    //div#properties exists
    m.module(document.getElementById('properties'),propertyPane);
});

///////propertyPane.js

define([ 'mithril', 'emitter'],
  function(m, emitter) {

    //mithril "namespace"
    var propertyPane = {};

    ///////////////////////
    //    Models         //
    ///////////////////////
    propertyPane.PropertyList = Array;

    propertyPane.Property = function(name, data) {
      //the following reflects the format of the data obects as sent by the event emitter
      this.name        = m.prop(name);
      this.value       = m.prop(data.value);
      this.type        = m.prop(data.valueType);
      this.visible     = m.prop(data.userVisible);
      this.editable    = m.prop(data.userEditable);
    };

    ///////////////////////
    //    Controller     //
    ///////////////////////
    propertyPane.controller = function() {

      this.properties = propertyPane.PropertyList();

      this.updatePropertyPane = function(sender) {
        //destroy current list
        this.properties.length = 0;

        for( var key in sender.currentItem.tag){
          this.properties.push(new propertyPane.Property(key, sender.currentItem.tag[key]));
        }
//>>>This is required to make the property pane to rerender:<<<
//      m.redraw(); //why?
//why doesn't redraw happen automatically (because I'm using m.module)??
      }.bind(this);

      //this reliably updates the the properties list
      //but rerender does not happen
      emitter.addCurrentItemChangedListener(this.updatePropertyPane);

    };

    ///////////////////////
    //    View           //
    ///////////////////////
    propertyPane.view = function(ctrl){
      return m('ul',
        ctrl.properties.map(function(property){
          return m('li', property.name() + ' ' + property.value());
        })
      );
    };

    return propertyPane;
});

我还尝试添加一个名为 foo 的属性，该属性在 updatePropertyPane 中更新，因此:

//in controller
this.foo = m.prop(Date.now());
//in updatePropertyPane
  this.foo(Date.now());
//in view
m('li', ...+this.foo()) //to make sure the view accesses this property.

那也没用。

Answer 1

令人惊讶的是，m.prop返回一个 getter/setter 非常没有副作用。

Mithril hooks本身在您的 View 的事件监听器中。

所以根据我对 Mithril 非常有限的经验，你应该使用 m 来设置你的事件监听器或者使用 m.startComputation / m.endComputation调用 m.redraw 的额外好处是允许应用程序的不同部分 only redraw once尽管更新了几件事。