Mithril组件-有界控制器

Mithril components - bounded controllers

本文关键字：控制器 组件 Mithril      更新时间：2023-09-26

我有一个mithril组件，它的控制器已经被绑定到一个上下文，如果我使用m.p component()， mithril会忽略这个绑定的控制器，并为视图提供一个默认的空控制器

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.m module传递视图/控制器，一切都如预期的那样工作

m.module(document.body, new UserWidget().header);
https://jsfiddle.net/chifer/mwddffy4/2/

是一个警告，组件控制器应该是无界的，并通过m.component调用传递参数?还是这是个bug?

是一个警告，组件控制器应该是无界的，并通过m.component调用传递参数?

是的。控制器被调用为带有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()));

小提琴。

但在实践中，这段代码复制了已经内置到控制器中的功能——引用Mithril组件API文档:

可选的controller函数创建一个对象，该对象可以以以下推荐的方式使用:

[…]

  • 它可以存储从模型方法返回的上下文数据(即来自请求的承诺)。
  • 可以保存对视图模型的引用。
基本上，您的原始应用程序代码包含一个构造函数，该构造函数发出请求并存储对返回承诺的引用，这正是控制器的作用。因此，您可以避免编写任何中间函数或您自己的构造函数，并将所有功能放入组件结构本身: 
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);

小提琴。

相关文章：