Question

我正在尝试使用骨干网，但我错过了它的基本概念，因为这是我尝试的第一个JavaScript MVVM Framework。

我看了to some guide，但我想我仍然不知道应该如何使用它。

我将展示我的应用程序以获得一些方向：

// Search.js

var Search = {
    Models: {},
    Collections: {},
    Views: {},
    Templates:{}
};

Search.Models.Product = Backbone.Model.extend({
    defaults: search.product.defaults || {},
    toUrl:function (url) {
        // an example method
        return url.replace(" ", "-").toLowerCase();
    },
    initialize:function () {
        console.log("initialize Search.Models.Product");
    }
});

Search.Views.Product = Backbone.View.extend({
    initialize:function () {
        console.log("initialize Search.Views.Product");
    },
    render:function (response) {
        console.log("render Search.Views.Product");
        console.log(this.model.toJSON());
        // do default behavior here
}
});

Search.Models.Manufacturer = Backbone.Model.etc...
Search.Views.Manufacturer = Backbone.View.etc...

然后在我的Web应用程序视图中：

<head>
<script src="js/jquery.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/backbone/backbone.min.js"></script>
<script src="js/backbone/Search.js"></script>
</head>

<body>
<script>
var search = {};
search.product = {};
search.product.defaults = {
    id:0,
    container:"#search-results",
    type:"product",
    text:"<?php echo __('No result');?>",
    image:"<?php echo $this->webroot;?>files/product/default.png"
};

$(function(){
    var ProductModel = new Search.Models.Product();
    var ProductView = new Search.Views.Product({
        model:ProductModel,
        template:$("#results-product-template"),
        render:function (response) {
            // do specific view behavior here if needed
            console.log('render ProductView override Search.Views.Product');
        }
    });
    function onServerResponse (ajax_data) {
        // let's assume there is some callback set for onServerResponse method
        ProductView.render(ajax_data);
    }
});
</script>
</body>

我想我错过了Backbone新实例的用途，我想用Backbone Search.js我应该构建像Search.Views.Product这样的基础应用程序并在视图中扩展它，因为ProductView。

因此，在我的示例中，使用render方法，将其与Search.js中的默认行为一起使用，并在html视图中使用特定行为。

经过一些尝试后，似乎ProductModel和ProductView只是实例，您必须在Search.js中执行所有代码，而不会创建特定的行为。

我明白这样做是为了让所有内容都保持最新状态，但如果我在不同的视图和相对位置使用此应用程序该怎么办？

我确定我错过了应该使用它的方式。

在this guides中，html视图中没有使用代码，所以我应该在没有插入特定情况的情况下编写应用程序中的所有代码吗？

如果没有，我应该如何为html视图的特定情况编写代码？

是否允许覆盖我的Backbone应用程序的方法？

Answer 1

基本上，你应该想到这样的不同部分：

模板指示应显示的内容和位置。它们是HTML格式的
views指示显示器应如何对环境中的变化做出反应（用户点击，数据更改）。它们是用javascript编写的
模型和集合可以保存数据并使其更易于使用。例如，如果在视图中显示模型，则可以在模型的数据更改时告知视图刷新
然后，你有javascript代码，它将使用正确的模型/集合创建新的视图实例并在浏览器中显示它们

我正在写一本关于Marionette.js的书，这是一个让Backbone更容易使用的框架。第一章以免费样本提供，并更详细地解释以上几点：http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf

了解Backbone架构基础概念

1 个答案: