秘银你好世界MVC的例子不起作用

时间:2015-03-16 00:28:36

标签: javascript html model-view-controller mithril.js

我无法让Mithril hello world MVC示例正常工作。

这是我的代码,从Mitrhil homepage复制而来。请注意,我所做的唯一更改是将m.request({method: "GET", url: "pages.json"});方法调用交换为手动生成的页面对象。

//namespace
var app = {};

//model
app.PageList = function() {
    var pages = [];
    pages.push({title: 'page 1', url: '/page1.html'});
    pages.push({title: 'page 2', url: '/page2.html'});
    return pages;
};

//controller
app.controller = function() {
    var pages = app.PageList();
    return {
        pages: pages,
        rotate: function() {
            pages().push(pages().shift());
        }
    }
};

//view
app.view = function(ctrl) {
    return [
        ctrl.pages().map(function(page) {
            return m("a", {href: page.url}, page.title);
        }),
        m("button", {onclick: ctrl.rotate}, "Rotate links")
    ];
};

//initialize
m.module(document.getElementById("example"), app);

正如您所看到的,我在jsFiddle上面的示例并不起作用,但另一个Mitrhil示例,todo应用jsFiddle正常工作。

我认为基本的MVC Mitrhil示例可以像Todo应用程序一样工作,并且可能链接到用户fork的jsFiddle或CodePen示例,类似于React。

2 个答案:

答案 0 :(得分:1)

有些调用pages应该是变量引用,因为它是一个数组。这是修复:http://jsfiddle.net/jug68s27/4/

ctrl.pages() - > ctrl.pages

pages().push(pages().shift()) - > pages.push(pages.shift())

答案 1 :(得分:0)

在此示例中,由于您没有使用 m.prop ,因此您不想重绘该值,如果您希望将值更改为cas使用   var pages = m.prop(''); 现在您可以使用pages().pushctrl.pages().map,因为m.prop是一个功能! 记住这一点非常重要,你会经常使用它