0

双方向データバインディングの不自然な例

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

▼/users/index.php

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

キャッチされていない SyntaxError: 予期しないトークン n

m.withAttr チュートリアル コードを操作するにはどうすればよいですか?

4

2 に答える 2

0

この例は工夫されているため操作が難しく、すぐに使用できるようには意図されていません。わずかに変更された、動作するバージョンを次に示します。

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

行われた変更:

  1. m.mount最初のパラメーターとして指定された要素内にhtmlを挿入するため、body要素をレンダリングするviewと、ボディ内にボディが作成されます。
  2. インスタント フィードバック用に入力フィールド イベントを に変更し、モデルを表示する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);

Unexpected token nエラーは、要求された URL が有効な JSON を返さない場合に発生する可能性があるため/users/index.php、独自のコードで機能するように JSON データを修正する必要があります。nameフィールドの周りに引用符はありません。

于 2015-07-06T12:16:44.267 に答える