Question

我正在学习Backbone.Marionette，这是尝试创建一个简单的应用程序，我在按钮点击时显示一些文本。

JS：

var MyApp = new Backbone.Marionette.Application();

MyApp.addRegions({
    mainRegion: "#container"
});

MyAppModel = Backbone.Model.extend({
    putText: function(){
        $("#container").html("Here is some text.");
    }
});

MyAppCollection = Backbone.Collection.extend({
    model: MyAppModel
});

MyAppItemView = Backbone.Marionette.ItemView.extend({
    events: {
        'click #button': 'putText'
    }
});

MyAppCompositeView = Backbone.Marionette.CompositeView.extend({
    // not sure what to mention here    
});

MyApp.start();

文本未显示且控制台中没有错误。我在这里缺少什么？

Answer 1

我无法理解你的目标是什么。

首先，您没有模板，ItemView“在屏幕上绘制”。其次，您的活动被捕获在错误的地方。应该捕获事件的MyAppItemView本身（然后还可以更新模型）。例如，在我的示例中，Hello被附加到DOM。不使用模型和集合。

这是一个简单的工作示例（http://jsfiddle.net/3G9Ls/3/），由 Derick Bailey 分叉（http://jsfiddle.net/derickbailey/M5J8Q/）。后者使用更完整的结构，应该是可行的方法。

// HTML

<div id="container"></div>

<script type="text/html" id="sample-template">
    <button id="button">Button</button>
</script>

// JS

var MyApp = new Marionette.Application();

MyApp.addRegions({
    "mainRegion": "#container"
});

MyAppItemView = Marionette.ItemView.extend({    
    template: "#sample-template",

    events: {
        "click #button": "appendText" 
    },

    appendText: function() {
        $("#container").append("Hello");
    }
});

MyApp.addInitializer(function(){
    MyApp.mainRegion.show(new MyAppItemView());
});

MyApp.start();

我真的建议阅读Marionette的文档。您还可以在Backbone.Marionette.js: A Gentle Introduction查看/购买 David Sulc 一书，了解Marionette背后的主要概念。

功能它没有绑定到事件

1 个答案: