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);

未捕获的SyntaxError：意外的令牌n

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

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

▼/用户/ index.php的

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

未捕获的SyntaxError：意外的令牌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

这个例子难以操作，因为它是人为的，它并不意味着开箱即用。这是一个稍微修改过的工作版本：

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 指定为第一个参数的元素，因此在body中呈现view元素会使正文成为正文。

将输入字段事件更改为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);

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

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

2 个答案:

使用m.request