如何将 jquery 替换为秘银等价物？

Question

类似于：

peer.on('open', function(id){ // this is a non jquery event listener 
  $('#pid').text(id);
});

类似...这是不正确的：

peer.on('open', function(id){
  m('#pid',[id])
});

这是正确的方法吗？我应该在尝试从 jquery 转换之前建立控制器和模型吗？

更多详情：

我正在尝试重写 PeerJS 示例中的 connect 函数：https://github.com/peers/peerjs/blob/master/examples/chat.html

Answer 1

在秘银中，你不应该尝试直接触摸DOM。您的事件处理程序应修改 View-Model 的状态，该状态应在您的 View 方法中访问。如果你 post 更多代码，我可以更详细地解释它是如何组合在一起的。

这是一个简单的例子，显示了流经秘银的数据。您的情况需要更复杂，但我目前无法解析所有 peer.js 代码。

http://codepen.io/anon/pen/eNBeQL?editors=001

var demo = {};

//define the view-model
demo.vm = {
  init: function() {
    //a running list of todos
    demo.vm.description = m.prop('');

    //adds a todo to the list, and clears the description field for user convenience
    demo.vm.set = function(description) {
      if (description) {
        demo.vm.description(description);
      }
    };
  }
};

//simple controller
demo.controller = function() {
  demo.vm.init()
};

//here's the view
demo.view = function() {
  return m("html", [
    m("body", [
      m("button", {onclick: demo.vm.set.bind(demo.vm, "This is set from the handler")}, "Set the description"),
      m("div", demo.vm.description()) 
    ])
  ]);
};

//initialize the application
m.module(document, demo);

请注意，该按钮正在调用视图模型 (set) 上的方法，该方法正在设置属性 (vm.description) 的值。这会导致视图重新呈现，并且 div 显示新值 (m("div", demo.vm.description()))。

Answer 2

如果您的事件侦听器类似于 websockets，那么事件会发生在秘银之外，这意味着您需要自己管理重绘。这是您需要做的：

将您的数据存储在独立模型中
渲染秘银视图时使用该模型
在 open 事件中，更新您的模型，然后调用 m.redraw()

概念示例：

var myModel = { id: 'blank' }

var MyComponent = {
  view: function () {
    return m('#pid', myModel.id)
  }
}

m.mount(document.getElementById('app'), MyComponent)

// This happens outside mithril, so you need to redraw yourself
peer.on('open', function(id) {
  myModel.id = id
  m.redraw()
})

如何将 jquery 替换为秘银等价物？

How to replace jquery with the mithril equivalent?

javascript

jquery

mithril.js

更多详情：