m.withAttr教程代码如何操作？

Question

双向数据绑定的人为示例

var user = {
    model: function(name) {
        this.name = m.prop(name);
    },
    controller: function() {
        return {user: new user.model("John Doe")};
    },
    view: function(controller) {
        m.render("body", [
            m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})
        ]);
    }
};

https://lhorie.github.io/mithril/mithril.withAttr.html

上面的代码我试过了，没有任何作用。

第一次尝试追加以下内容

m.mount(document.body, user);

Uncaught SyntaxError: Unexpected token n

然后我尝试附加以下内容。

var users = m.prop([]);
var error = m.prop("");
m.request({method: "GET", url: "/users/index.php"})
        .then(users, error);

▼/users/index.php

<?php
echo '[{name: "John"}, {name: "Mary"}]';

Uncaught SyntaxError: Unexpected token n

如何操作m.withAttr教程代码？

Answer 1

Try returning m('body', [...]) from your controller.

view: function (ctrl) {
    return m("body", [
        ...
    ]);
}

render 不应在 Mithril 组件内部使用（render 仅用于在现有 DOM 节点上安装 Mithril 组件）。

Answer 2

这个例子很难操作，因为它是人为设计的，并不是为了工作 out-of-the-box。这是一个稍微修改过的工作版本：

http://jsfiddle.net/ciscoheat/8dwenn02/2/

var user = {
    model: function(name) {
        this.name = m.prop(name);
    },
    controller: function() {
        return {user: new user.model("John Doe")};
    },
    view: function(controller) {
        return [
            m("input", {
                oninput: m.withAttr("value", controller.user.name),
                value: controller.user.name()
            }),
            m("h1", controller.user.name())
        ];
    }
};

m.mount(document.body, user);

所做的更改：

m.mount 将 html 注入指定为第一个参数的元素，因此在 view 中呈现 body 元素将在 body.
将输入框事件更改为oninput以进行即时反馈，并添加了一个h1来显示模型，因此您可以在输入框更改时看到它的变化。

使用m.request

如何根据您的修改发出显示检索到的数据的 ajax 请求的另一个示例：

http://jsfiddle.net/ciscoheat/3senfh9c/

var userList = {
    controller: function() {
        var users = m.prop([]); 
        var error = m.prop("");

        m.request({
            method: "GET", 
            url: "http://jsonplaceholder.typicode.com/users",
        }).then(users, error);

        return { users: users, error: error };
    },
    view: function(controller) {
        return [
            controller.users().map(function(u) {
                return m("div", u.name)
            }),
            controller.error() ? m(".error", {style: "color:red"}, "Error: " +  controller.error()) : null
        ];
    }
};

m.mount(document.body, userList);

如果请求的 url 不 return 有效 JSON，则可能会发生 意外令牌 n 错误，因此您需要修复/users/index.php 中的 JSON 数据以使其与您自己的代码一起使用。 name 字段周围没有引号。

m.withAttr教程代码如何操作？

How do I operate the m.withAttr tutorials code?

mithril.js

使用m.request