秘银组件 - 有界控制器

Question

我有一个带有控制器的秘银组件，该控制器已经绑定到上下文，如果我使用 m.component()，秘银将忽略绑定控制器并为视图提供默认的空控制器

UserWidget = function(){
  this.allUsers =  User.load();
  this['header'] = {      
    'controller' : function(users){
      this.users = users;
    }.bind(this, this.allUsers),
    'view' : function(ctrl) {
      console.log('ctrl', ctrl)
      if (ctrl.users()) {
        return m('.user', ctrl.users()[0].name());
      }
    }
  }
}

//initialize
m.module(document.body, m(new UserWidget().header));

但是，如果我通过 m.module 通过 view/controller，一切都会按预期进行

m.module(document.body, new UserWidget().header);

https://jsfiddle.net/chifer/mwddffy4/2/

组件控制器应该是无界的并通过 m.component 调用传递参数是否需要注意？或者这是一个错误？

Answer 1

Is it a caveat that component controllers should be unbounded and passed params via the m.component call?

是的。控制器作为带有 new 关键字的构造函数调用，这意味着 this（以及传入的参数）不能绑定到它。

您的代码可以通过避免 this 和内部绑定来简化：

UserWidget = function(){
  var users =  User.load();

  return {
    'view' : function() {
      if (users())
        return m('.user', users()[0].name());
    }
  }
}

//initialize
m.module(document.body, m(UserWidget()));

Fiddle here.

但在实践中，这段代码复制了控制器中已经内置的功能——引自 the Mithril API documentation for components:

The optional controller function creates an object that may be used in the following recommended ways:

[...]

It can store contextual data returned from model methods (i.e. a promise from a request).

It can hold a reference to a view model.

基本上，您的原始应用程序代码涉及一个构造函数，该构造函数发出请求并存储对返回的承诺的引用，而这正是控制器的用途。因此，您可以避免编写任何中间函数或您自己的构造函数，并将所有这些功能融入组件结构本身：

UserWidget = {
  'controller' : function(){
    this.users = User.load();
  },
  'view' : function(ctrl) {
    if (ctrl.users())
      return m('.user', ctrl.users()[0].name());
  }
}

//initialize
m.module(document.body, UserWidget);

Fiddle here.

秘银组件 - 有界控制器

Mithril components - bounded controllers

javascript

mithril.js